# Panel is resized when modal dialog is open

**URL:** <https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085>\
**Category:** UXP Plugin API\
**Tags:** api-feedback\
**Created:** [July 25, 2019, 3:23pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085 "2019-07-25T15:23:58Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![mightyalex](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/mightyalex/32/777_2.png) [@mightyalex](https://forums.creativeclouddeveloper.com/u/mightyalex)\
**Post date:** [July 25, 2019, 3:23pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/1 "2019-07-25T15:23:58Z")

</div>

### 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](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/21b6f8107fecc5ee146952933a538fc2f37a033f.png)  
 ![2](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/44cff07b133eaf47ee1fb1d73cee9fe7fc9a3cb1.png)

---

<div class="post-metadata">

**Author:** ![stevekwak](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/stevekwak/32/48_2.png) [@stevekwak](https://forums.creativeclouddeveloper.com/u/stevekwak)\
**Post date:** [July 25, 2019, 4:02pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/2 "2019-07-25T16:02:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [July 25, 2019, 5:27pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/3 "2019-07-25T17:27:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mightyalex](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/mightyalex/32/777_2.png) [@mightyalex](https://forums.creativeclouddeveloper.com/u/mightyalex)\
**Post date:** [July 25, 2019, 5:41pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/4 "2019-07-25T17:41:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [July 25, 2019, 5:42pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/5 "2019-07-25T17:42:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mightyalex](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/mightyalex/32/777_2.png) [@mightyalex](https://forums.creativeclouddeveloper.com/u/mightyalex)\
**Post date:** [July 25, 2019, 5:55pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/6 "2019-07-25T17:55:02Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![mightyalex](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/mightyalex/32/777_2.png) [@mightyalex](https://forums.creativeclouddeveloper.com/u/mightyalex)\
**Post date:** [July 25, 2019, 5:59pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/7 "2019-07-25T17:59:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cpryland](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/cpryland/32/1172_2.png) [@cpryland](https://forums.creativeclouddeveloper.com/u/cpryland)\
**Post date:** [July 25, 2019, 6:20pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/8 "2019-07-25T18:20:48Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![stevekwak](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/stevekwak/32/48_2.png) [@stevekwak](https://forums.creativeclouddeveloper.com/u/stevekwak)\
**Post date:** [July 26, 2019, 1:54pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/9 "2019-07-26T13:54:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![saud](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/saud/32/695_2.png) [@saud](https://forums.creativeclouddeveloper.com/u/saud)\
**Post date:** [November 14, 2019, 11:46am UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/10 "2019-11-14T11:46:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [November 14, 2019, 6:00pm UTC](https://forums.creativeclouddeveloper.com/t/panel-is-resized-when-modal-dialog-is-open/1085/11 "2019-11-14T18:00:53Z")

</div>

> [@cpryland](#):
>
> I suppose if the dialog were a child of the panel, that might be somewhat expected…

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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.