Modal dialog applies weird margin to body of my iframe

Confluence Development Confluence Cloud
,
1

Hi,

I am developing an app for confluence. When I open a modal on this way:

AP.dialog.create({ key: 'dialog-confirm-spacepub' })

and render inside content using @atlaskit/modal-dialog, I check that inside the iframe, the body has a weird hardcoded margin via style.

<body style="background-color: transparent; border: 0px; margin: 10px 10px 0px !important;">

This makes for a fraction of second, displaying scrollbars that disappear once the modal content is loaded.

image
image1408×754 4.17 KB

Does anybody know where that margin comes from? And how can I avoid it?

EDIT: I have just checked that the file all.js served from Atlassian has this code:

var margin = combined._data.options.isDialog ? '10px 10px 0 10px' : '0';
  if (consumerOptions.get('margin') !== false) {
    var setBodyMargin = function setBodyMargin() {
      if (document.body) {
        document.body.style.setProperty('margin', margin, 'important');
      }
    };
    setBodyMargin(); // Try to set it straight away
    window.addEventListener('DOMContentLoaded', setBodyMargin); // If it doesn't exist now (likely) we can set it later
  }

If someone knows how to avoid this behaviour.

Thanks.

2

Hello,

I have also run into this problem. Unfortunately the margin can not be overwritten with CSS because Atlassian sets it directly on the body element with !important.

What we can do is overwrite it with JS like so:

<script src="https://connect-cdn.atl-paas.net/all.js" defer></script>
<script>
  window.addEventListener('DOMContentLoaded', function resetBodyMargin() {
    // Clear it after all.js sets the margin.
    setTimeout(() => document.body.style.setProperty('margin', '0'));
  });
</script>
3

Hey, I found a way to solve the issue, I forgot to post it. When you load the script all.js you can pass data-options, margin to false is what we were looking for.

<script src=""https://connect-cdn.atl-paas.net/all.js" data-options="margin:false;"></script>
1 Like
4

I posted the solution, thanks for remembering I posted this.