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?
