Sizing of AP.dialog.create from dynamicContentMacro

Confluence Development Confluence Cloud
1

I would like to give my users the possibility to view a content macro in full screen mode.

So when a user sees my macro in the page he can click the full screen button and I open a dialog with the following JS code:

window.AP.dialog.create({
    key: 'fullScreenMacro',
    chrome: false,
    width: "100%",
    height: "100%",
    closeOnEscape: true,
    customData: {
        contentId,
        version
    }
});

Which opens the module defined in atlassian-connect.json:

...
  "modules": {
    "generalPages": [
      {
        "key": "fullScreenMacro",
        "location": "hidden",
        "url": "?mode=fullscreen",
        "name": {
          "value": "Mind Map"
        }
      }
...

The issue now is, that the iframe that Confluence is opening does not always have a height of 100%, but rather depends on the scroll offset in the confluence page.

When the confluence page is at the top, the dialog has a height of 100%. If the page is scrolled down before opening the dialog the height of the dialog is reduced by the amount of pixels scrolled. If scrolled down to 100% of the browsers view height (100vw) the macro suddenly gets to be 100% height again.

Does look like a bug in connect to me. Anybody else seeing this or am I doing something wrong?

2

The sizing mechanism is terrible. Can’t you dynamically set the width and height in pixels rather than using %? i.e. window.outerWidth and window.outerHeight

3

Excellent idea!

Sadly, using anything else then “100%” (eg “99%”, 800, “800”, “800px”) will position the dialog 169px from the top. :thinking:

4

Found the culprit:

<script data-options="sizeToParent:true" src='https://connect-cdn.atl-paas.net/all.js'
            type='text/javascript'></script>

sizeToParent caused the unwanted behaviour. But as I need it for other entry points into the single page application I now set it dynamically depending on the URL query string.

<script>
    var mode = new URLSearchParams(window.location.search).get("mode")
    var script = document.createElement('script');
    script.src = 'https://connect-cdn.atl-paas.net/all.js';
    var attributes = mode === 'customcontent' ? 'sizeToParent:true' : 'resize:false;margin:false'
    script.setAttribute('data-options', attributes);
    document.head.appendChild(script);
</script>
2 Likes