Error with Jira Cloud IFrame

Ifame Apps development haves unwanted bug described below:

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

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

@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?

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

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.

I did only like this:

JavaScript:

var viewPort = Create.Ext.ViewPort({
...
renderTo: “ac-content”
...
});
...
<body><div  class=“ac-content”></div></body>

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

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

Like is screenshot below there a Jira body HTML tag:

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

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:.

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;

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.

This does not help either:

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