Error with Jira Cloud IFrame

Jira Development Jira Cloud
#1

Ifame Apps development haves unwanted bug described below:

Error Occurs
Error Occurs2108Ɨ1080 84.1 KB

This error disappear when our App max-height is not same than IFrame height:

Error Disappears
Error Disappears1920Ɨ1080 64.7 KB

#2

Looks like itā€™s connected to the issue Iā€™ve described here:
Addition vertical scrollbar started to appear - Jira Development / Jira Cloud - The Atlassian Developer Community
I would add it to this thread, but didnā€™t realise by the title that it could be the same issue.

I didnā€™t notice that setting max height impacts this - Iā€™ll try. Any observations how resizing the webbrowser with the max height set impacts this?

2 Likes
#3

@matti.kiviharju Iā€™ve tried and I donā€™t see any way that the max-height makes this any better. Could you give more details where you set it, some code snippet?

#4

I canā€™t give a code snippet, because we using a Ext JS 4.2 and itā€™s Closed Source JavaScript GUI Framework.

#5

Ok, I understand.
I was rather thinking where the max-height attribute actually landed in the DOM.
Iā€™ve added it to the <body class=ā€œac-contentā€ ā€¦>, <section id=ā€œcontentā€ role=ā€œmainā€ā€¦> and the <div id=ā€œpageā€ ā€¦>. I think these are all generated automatically by the node.js ACE example.

#6

I did only like this:

JavaScript:

var viewPort = Create.Ext.ViewPort({
...
renderTo: ā€œac-contentā€
...
});
...
<body><div  class=ā€œac-contentā€></div></body>
#7

Ok, thanks for response. Still I donā€™t see this changing anything for the app Iā€™m working on :frowning:

#8

I think Ext JS 4.2 Framework it self somehow causes this bug.

Like is screenshot below there a Jira body HTML tag:

error_003
error_0031920Ɨ929 60.8 KB

#9

Okay,

With code below issue is almost fixed but still additional scrollbar shows up before page load and disappears after page load.

window.onload = function() {
    AP.resize('100%', '99%');
}
1 Like
#10

Glad that it worked for you, unfortunatelly, the AP.resize (100%,99%) doesnā€™t solve my case - I mean it solves it, till I donā€™t resize the webbrowser window :thinking:.

#11

You need code like this probably:

const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');

function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = reportWindowSize;
#12

I finally had time to play with it again. Unfortunately for my situation it doesnā€™t help. No matter how I resize the window window.innerHeight returns the same value.
Iā€™ve tried to be ā€œcleverā€ and put ***AP.resize(ā€˜100%ā€™,ā€˜calc(100% - 5)ā€™);***but also no changes.

Thanks for all the information.

#13

This does not help either:

window.onresize = function() {
    AP.resize('100%', '99%');
}