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

Confluence Development Confluence Cloud
, , , , ,
1

Issue Overview:
We’re 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.

Details:

  1. 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.
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%;
}
  1. 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
});
  1. HTML Structure:
  • Our HTML structure in the Handlebars template (main.hbs) is as follows:
<!DOCTYPE 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>
            <li><a href="/api-tokens">API Tokens</a></li>
            <li><a href="/logout">Logout</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 Needed:

  • 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 your help!