Issue Overview: I'm encountering a persistent problem with our Confluence app where the iframe height continuously expands indefinitely. This issue arises when we set the html and body elements to 100% height in our CSS, which we need to ensure the app content properly fills the screen. Instead, the iframe content initially loads at less than half the screen height and then starts expanding without limit. Looking at the developer tools (inspect), I can see that the Iframe height is increasing infinitely. Details: * CSS Setup: * We attempted to set the height of the html and body elements to 100% to make the content fill the screen. * We also tried setting the body height to 100vh. * Both approaches resulted in the iframe height expanding infinitely Here is the CSS used: html , body { font-family : Arial, sans-serif; margin : 0 ; padding : 0 ; background-color : #f4f4f4 ; height : 100% ; } body { height : 100vh ; /* Tried both 100% and 100vh */ } nav ul { list-style-type : none; padding : 0 ; } nav ul li { display : inline; margin-right : 10px ; } nav ul li a { text-decoration : none; color : #333 ; } .container { margin : 20px ; height : 100% ; width : 100% ; } 2. JavaScript for Handling Iframe Resizing: * We included the all.js script from Atlassian to handle iframe resizing. * Added a script to dynamically include the all.js file and call AP.resize() function to adjust the iframe size. Here is the JavaScript we used: document . addEventListener ( 'DOMContentLoaded' , function () { const script = document . createElement ( 'script' ); script. src = "https://connect-cdn.atl-paas.net/all.js" ; script. async = true ; document . head . appendChild (script); function resizeIframe () { if ( window . AP ) { window . AP . resize (); } } resizeIframe (); setInterval (resizeIframe, 500 ); // Adjust the interval as needed }); HTML Structure: * Our HTML structure in the Handlebars template (main.hbs) is as follows: html > html > head > title > {{title}} title > link rel = "stylesheet" type = "text/css" href = "/css/styles.css" > head > body > nav > ul > li > a href = "/dashboard" > Dashboard a > li > li > a href = "/documentation" > Documentation a > li > ul > nav > div class = "container" > {{{body}}} div > script src = "/js/scripts.js" > script > body > html > Current Behavior: * When the app loads, the iframe height starts at less than half of the screen height. * As soon as we set the html and body height to 100%, the iframe height starts expanding infinitely. * Setting specific pixel values for height prevents infinite growth but doesn't achieve the desired responsive design. Community Insights: * Has anyone experienced similar issues with iframe height expanding indefinitely in Confluence apps? * Are there any recommended approaches or best practices for handling iframe resizing in Confluence apps? * Could there be any specific configuration or settings we might be missing that could resolve this issue? thank you for any help.

Is there any update on this? Was this solved?

Hi @Jessica Thanks so much for the update. I will be sending in more details to the link you provided. If I have any issues ill be sure to reach out. thanks again, Sal

Hi @Sal Mourad We got an update! Since it may be needed some additional information for troubleshooting and a HAR file (please don't share it here or at the developer community post) and to avoid sharing any private information in the public posts, would you be able to open a request with our development team at https://developer.atlassian.com/support? That should allow you to open a request even if you are an individual developer. If you have any additional information on how to reproduce the issue other than the details you shared in the developer community post, please feel free to share it there as well! If you have any issues opening a developer support request from there, please let me know, and I'll check with the team to determine the best way to proceed. Regards, Jessica

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

height of an iframe in a Confluence app expands infinitely when the html/body set to 100%

Sal Mourad

Issue Overview:

I'm encountering a persistent problem with our Confluence app where the iframe height continuously expands indefinitely. This issue arises when we set the html and body elements to 100% height in our CSS, which we need to ensure the app content properly fills the screen. Instead, the iframe content initially loads at less than half the screen height and then starts expanding without limit. Looking at the developer tools (inspect), I can see that the Iframe height is increasing infinitely.

Details:

CSS Setup:
- We attempted to set the height of the html and body elements to 100% to make the content fill the screen.
- We also tried setting the body height to 100vh.
- Both approaches resulted in the iframe height expanding infinitely

Here is the CSS used:

<span>html</span>,
<span>body</span> {
    <span>font-family</span>: Arial, sans-serif;
    <span>margin</span>: <span>0</span>;
    <span>padding</span>: <span>0</span>;
    <span>background-color</span>: <span>#f4f4f4</span>;
    <span>height</span>: <span>100%</span>;
}

<span>body</span> {
    <span>height</span>: <span>100vh</span>; <span>/* Tried both 100% and 100vh */</span>
}

<span>nav</span> <span>ul</span> {
    <span>list-style-type</span>: none;
    <span>padding</span>: <span>0</span>;
}

<span>nav</span> <span>ul</span> <span>li</span> {
    <span>display</span>: inline;
    <span>margin-right</span>: <span>10px</span>;
}

<span>nav</span> <span>ul</span> <span>li</span> <span>a</span> {
    <span>text-decoration</span>: none;
    <span>color</span>: <span>#333</span>;
}

<span>.container</span> {
    <span>margin</span>: <span>20px</span>;
    <span>height</span>: <span>100%</span>;
    <span>width</span>: <span>100%</span>;
}

2. JavaScript for Handling Iframe Resizing:

We included the all.js script from Atlassian to handle iframe resizing.
Added a script to dynamically include the all.js file and call AP.resize() function to adjust the iframe size.

Here is the JavaScript we used:

<span>document</span>.<span>addEventListener</span>(<span>'DOMContentLoaded'</span>, <span>function</span> () {
    <span>const</span> script = <span>document</span>.<span>createElement</span>(<span>'script'</span>);
    script.<span>src</span> = <span>"https://connect-cdn.atl-paas.net/all.js"</span>;
    script.<span>async</span> = <span>true</span>;
    <span>document</span>.<span>head</span>.<span>appendChild</span>(script);

    <span>function</span> <span>resizeIframe</span>() {
        <span>if</span> (<span>window</span>.<span>AP</span>) {
            <span>window</span>.<span>AP</span>.<span>resize</span>();
        }
    }

    <span>resizeIframe</span>();
    <span>setInterval</span>(resizeIframe, <span>500</span>); <span>// Adjust the interval as needed</span>
});

HTML Structure:

Our HTML structure in the Handlebars template (main.hbs) is as follows:

<span><span><!DOCTYPE <span>html</span>></span>
<span><<span>html</span>></span>

<span><<span>head</span>></span>
    <span><<span>title</span>></span>{{title}}<span></<span>title</span>></span>
    <span><<span>link</span> <span>rel</span>=<span>"stylesheet"</span> <span>type</span>=<span>"text/css"</span> <span>href</span>=<span>"/css/styles.css"</span>></span>
<span></<span>head</span>></span>

<span><<span>body</span>></span>
    <span><<span>nav</span>></span>
        <span><<span>ul</span>></span>
            <span><<span>li</span>></span><span><<span>a</span> <span>href</span>=<span>"/dashboard"</span>></span>Dashboard<span></<span>a</span>></span><span></<span>li</span>></span>
            <span><<span>li</span>></span><span><<span>a</span> <span>href</span>=<span>"/documentation"</span>></span>Documentation<span></<span>a</span>></span><span></<span>li</span>></span>
        <span></<span>ul</span>></span>
    <span></<span>nav</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"container"</span>></span>
        {{{body}}}
    <span></<span>div</span>></span>
    <span><<span>script</span> <span>src</span>=<span>"/js/scripts.js"</span>></span><span></<span>script</span>></span>
<span></<span>body</span>></span>

<span></<span>html</span>></span></span>

Current Behavior:

When the app loads, the iframe height starts at less than half of the screen height.
As soon as we set the html and body height to 100%, the iframe height starts expanding infinitely.
Setting specific pixel values for height prevents infinite growth but doesn't achieve the desired responsive design.

Community Insights:

Has anyone experienced similar issues with iframe height expanding indefinitely in Confluence apps?
Are there any recommended approaches or best practices for handling iframe resizing in Confluence apps?
Could there be any specific configuration or settings we might be missing that could resolve this issue?

thank you for any help.

Accepted answers

All comments

Jessica_j1vjtw

Hi @Sal Mourad

Welcome to the Atlassian Community!

From the description, since Custom CSS is not available in Confluence Cloud, I believe you are trying to create a custom Confluence app or a custom Confluence macro. Is that correct?

If that is the scenario, I believe this question would be better answered and get additional help in our Developer Community, as more users are developing apps and custom macros, and our development team may be able to help with some of those queries.

Hope this helps!

Regards,
Jessica

Sal Mourad

Hi Jessica,

Thank you for your response.

I have already posted in the Developer Community 5 days ago about the same issue, but I have not received a response from anyone. Is there any way for someone from the development team to look at my question so I can get some help with this? And yes, this is about a custom app.

Hope to hear from you soon.

Regards,
Sal Mourad

link to post: https://community.developer.atlassian.com/t/issue-where-the-height-of-an-iframe-in-a-confluence-app-continuously-expands-infinitely-when-the-html-and-body-elements-are-set-to-100-height-causing-layout-problems/81963

Jessica_j1vjtw

Thanks for sharing the link for the post in the developer community, Sal.

Let me check this internally to understand how the developer community is working right now, since you got no answer so far.

Once I have more updates on this, I'll get back to you here.

Regards,
Jessica

Sal Mourad

Thanks for your help Jessica, I appreciate you taking the time!

Best,

Sal

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

cloud

confluence-cloud

iframe