Make inline dialog scrollable if content is too large

In our Confluence Cloud app, we are defining a web item that opens an inline dialog, something like this:

"webItems": [
    {
        "location": "system.content.button",
        "url": "/...",
        "context": "addon",
        "target": {
            "type": "inlinedialog",
            "options": {
                "width": "400"
            }
        },
        "name": {
            "value": "Document toolbox"
        },
        "key": "k15t-docs-document-toolbox-dialog"
    }
]

The content of this inline dialog will be about 550 pixels high, and might get higher in the future. This is too high even for a maximized browser window on a 1366×768 screen, so we want to make the inline dialog scrollable somehow.

What we found was that Confluence was rendering the inline dialog like this:

<div class="aui-inline-dialog" style="left: auto; top: 126px; right: 10px; display: block;">
    <div class="aui-inline-dialog-contents contents" style="width: 400px; max-height: 451px; height: 546.359px;">
        <div class="ap-iframe-container iframe-init">
            <iframe class="ap-iframe" style="width: 400px; height: 546.359px;"></iframe>
        </div>
    </div>
</div>

As you can see, the iframe is sized as 546px according to its contents, but there is a wrapper around it that cuts the iframe to 451px, a value that seems to depend on the viewport height. Now, because the iframe is sized according to its content, no scrollbars are shown inside the iframe. The bottom of the iframe is simply cut off. I also couldn’t find any way to detect the browser viewport size from within the iframe, in order to manually size it.

The only workaround that I can think of is to manually size the iframe to a fixed size and make it scrollable. However, on larger screens this would look quite bad.

Is there any way to make our inline dialog scrollable only when the browser viewport is not high enough?

Hi @candid,

Inline dialogs are meant for displaying small amounts of information (see https://www.atlassian.design/guidelines/product/components/inline-dialog) so my first response is to look for an alternate design such as displaying the information in a modal dialog or panel.

Regards,
Dugald

Thanks for your response.

What we are trying to achieve is an additional dropdown menu that acts in a similar way as the dropdown menu with the page actions on the top right of a page. That dropdown also contains a lot of items, and if the screen is too small, it becomes scrollable. So I think from a design perspective it is justified that our dropdown menu would contain a lot of items as well and become scrollable when they don’t fit on the screen, and a modal dialog or panel would be inappropriate to represent it.

Hi! Actually i came here exploring the real issue we have in our Jira. In Edit Issue view there is a popover with Fields. It looks like scroll is there but is truncated. Please see the snapshot. Do you know anyone who can help to solve it? Thanks!

Technically is also an inline dialog ( aui-inline-dialog class )

A simple solution is to set a fixed max height on your iframe content and make it scrollable. That’s not a perfect solution, since it does not work well with different browser window heights.

A more complex but better solution would probably be an intersection observer. By using the approach that I have explained here, you would observe multiple invisible containers to determine what size of the iframe is currently visible. You would put the actual contents of your iframe into a separate container that is made scrollable using overflow: auto and fix its height to the visible height of the iframe returned by the intersection observer. Let me know if you want to try out this approach and need any help.

Well - that’s a whole point - if it’s just a custom app - then it’s ok - we can do anything. But this one seems to be how Jira uses this control. I’ve found this bug exists since 2015: [JRASERVER-44499] The Configure Fields menu does not show a complete scrollbar when rendering the custom tab containing all available fields - Create and track feature requests for Atlassian products.