Panel is resized when modal dialog is open

Adobe XD UXP Plugin API
#1

Issue

When you show a dialog, the panel that is responsive becomes slightly resized, I would guess double the size, but only in the background. See second image attachment.

Steps to reproduce

  • Have a responsive panel plugin
  • Show a modal dialog
  • The responsive plugin panel increases its width

Expected Behavior

Panel width should stay unchanged.

Screenshots

1
12880×1800 482 KB

2
22880×1800 471 KB

#2

Looks like it’s taking the modal window’s width…? @kerrishotts any UXP known issues here?

#3

Which version of XD is this on? I’ve seen this in the past, but hadn’t in my own plugins lately. Can you share where you’re attaching the <dialog> node in the DOM tree?

#4

@kerrishotts I am using https://github.com/AdobeXD/plugin-toolkit on XD version 21.1

#5

Cool. Are you applying any styles to your panel element for width & height?

#6

Hmm I don’t think so, I insert the panel markup using:

const filtersGrid = require('./filtersGrid.js');
let rootNode = document.createElement("panel");
rootNode.innerHTML = filtersGrid();

Here is the panel markup file: https://gist.github.com/perfectflow/b3c18cef2f908cdc8afabbe84b179f32

Then switch between empty state and functional state depending on user selection:

function update(selection) {
if (selection.items.length > 0) {
    document.querySelector("#filtersGrid").style.display = "block";
    document.querySelector("#initialState").style.display = "none";
}else {
    document.querySelector("#filtersGrid").style.display = "none";
    document.querySelector("#initialState").style.display = "block";
}

}

No additional CSS anywhere else in the code.

1 Like
#7

I found a solution with specifying a width of 100% to the form element. Didn’t had any ‘width’ specified before.

#filtersGrid {display: none; width: 100%;}

Actually the form was the only element without width and had this unintended resize.

1 Like
#8

Yes, but isn’t still surprising that opening the modal dialog had that effect?

I suppose if the dialog were a child of the panel, that might be somewhat expected…

#9

Yes, i agree it’s very strange. We will look into this further

#10

I was going through the same problem and this fixed it for me. Thank you

1 Like
#11

In my experience, I think behind the scenes this is true.

IIUC your plugin dialogs and panel are part of the same HTML document.

Dialogs might be defined as dialog elements and panels may be added to the document.body element or child node of the body element (Plugins panel node related).

So if your panel doesn’t have a width and the modal dialog is displayed then the body size increases and the panel, being a block element of body fills that space.

When you give it a width, say 100%, then some behind the scenes calculations are being performed to get the panel width from the Plugins panel node rather than the body element.

1 Like