Jira does not resize iframe height correctly

Jira Development Jira Cloud
#1

Hi,

we show an external page in the iframe of our plugin. However, the height of the iframe is not adapted to its contents - it’s always shown with a height of 150px and a vertical scrollbar.

How can I get Jira to compute and set the height of the iframe correctly?

#2

Hi @matthias1,

The information you’ve shared is a little sparse. Have you tried calling AP.resize()? What does your descriptor look like? Where’s your iframe located?

Cheers,
Sven

Jira resizes iframe height constantly
#3

Hi @sven.schatter,

thanks for having a look. My plugin contains this:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <div th:replace="fragments/header :: header(${localBaseUrl})"/>
</head>
<body>
    <th:block th:utext="${webappLink}">no data</th:block>
</body>
</html>

the header is

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Fragments to be included in the templates</title>
</head>
<body>

    <div th:fragment="header (localBaseUrl)">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <script src="https://connect-cdn.atl-paas.net/all.js" data-options="sizeToParent:true;resize:true"></script>

        <link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui.min.css" media="all">
        <link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui-experimental.min.css" media="all">

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui.min.js"></script>
        <script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-experimental.min.js"></script>
        <script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-datepicker.min.js"></script>
        <script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-soy.min.js"></script>

        <style>
            body {
                background-color: #fff;
            }
            .aui-page-panel-content {
                padding: 20px;
            }
            .formtitle {
                border-bottom: 1px solid #ddd;
            }
            html, body {
                height:100%;
                width:100%;
                margin:0;
            }
            .h_iframe iframe {
                width:100%;
                height:100%;
            }
            .h_iframe {
                height: 100%;
                width:100%;
            }
        </style>
    </div>
</body>
</html>

and the value of ${webappLink} in this case is:

<div class="h_iframe">
  <iframe height="800px" frameborder="0" src="https://the-page-to-show">
   Sorry, your browser does not support iframes.
  </iframe>
</div>

The page which is shown has a size of approx. 1200px, but the iframe stays at 150px.
Regarding AP.resize:I understood from the docs that Atlassian connect does this automatically when iframe is rendered. At least it did when we had this issue: Jira resizes iframe height constantly

#4

It does not work well with absolutely positioned elements. So it all depends on the content you inject in the iframe.
You might want to calculate the height on your own and use AP.resize as suggested.

#5

Hi @jack,

as far as I see there’s no absolute positioning in the page I show. Quite simple page with some tables in it.

It’s just strange because resizing worked Ok before switching to Atlassian Connect 2 - with the same content.

Do you have a pointer to an example on how AP.resize() is meant to be used? I’m not really a JS developer.

#6

Following this thread: https://community.atlassian.com/t5/Confluence-questions/How-to-adjust-width-and-height-of-iframe-to-fit-with-content-in/qaq-p/279202, I added this to my issue tab page:

        <script>
            window.onload = function() {
                console.log("resizing ...")
                AP.resize('100%', 'calc(100vh - 160px)');
            }
        </script>

The function is called, but it doesn’t change anything beside I have now a second vertical scrollbar shown.
BTW: I tried AP.resize() with and without parameters.

Update: I also tried to call AP.resize() after a delay so the page inside our iframe is completely loaded. No effect: hight is still 150

#7

Have you tried adding this to your JS:

AP.resize('100%','100%');

AP.sizeToParent();

And in your html layout:

<body class="ac-content">

When I want to force the height of an absolute div with scrollbars in CSS (minus ie. 215px of the space above the container):

.some-container-class {
    overflow-y  : auto;
    height      : calc(100vh - 215px);
}

It took me a while to find out how to get rid of that annoying iframe scrollbar, but this did eventually fixed it for me.

#8

Hi @11142,

yes: I tried with ac-content and AP.resize() - with relative and absolute values. No effect. I’m currently not working on that particular project, but when I’m on it the next time I will try with that overflow-y setting.

Thanks.

#9

I have been working on Confluence app lately. It seems that this only worked for me with Jira apps.
After searching around for solutions, I’ve added these attributes to my app’s javascript tag and removed the “ac-content” class from the body and AP.resize and AP.sizeToParent:

<script src="/js/addon.js" data-options="sizeToParent:true;hideFooter:true"></script>

Nevermind, same issue. Iframe only resizes when I resize my browser window manually…

See this ticket: https://ecosystem.atlassian.net/browse/ACJIRA-2092
Sigh