Panel is resized when modal dialog is open

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


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

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?

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

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

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.

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.

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…

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