# Resize modal dialog after opening?

**URL:** <https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350>\
**Category:** UXP Plugin API\
**Tags:** javascript\
**Created:** [October 15, 2022, 11:29pm UTC](https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350 "2022-10-15T23:29:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![kbsanders](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kbsanders/32/2388_2.png) [@kbsanders](https://forums.creativeclouddeveloper.com/u/kbsanders)\
**Post date:** [October 15, 2022, 11:29pm UTC](https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350/1 "2022-10-15T23:29:51Z")

</div>

A simple question that may not have a simple answer:

Is there a programmatic way to resize a modal dialog that has already been opened via `uxpShowModal()`?

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [October 17, 2022, 8:44am UTC](https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350/2 "2022-10-17T08:44:37Z")

</div>

What happens if you call the function again?  
If that does not work, one solution could be to store all the displayed data in a state, close the dialog and reopen it with the new size, then populate the UI from the state again.

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [October 17, 2022, 8:50am UTC](https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350/3 "2022-10-17T08:50:18Z")

</div>

I forgot to test this yesterday, but I believe just changing the style `width/height` for the `dialogElement` (the one on which you call `dialogElement.uxpShowModal()`) should do it. If it doesn’t, probably just another UXP limitation, because this `dialogElement` is just a usual HTML dom element

---

<div class="post-metadata">

**Author:** ![kbsanders](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kbsanders/32/2388_2.png) [@kbsanders](https://forums.creativeclouddeveloper.com/u/kbsanders)\
**Post date:** [October 17, 2022, 1:59pm UTC](https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350/4 "2022-10-17T13:59:55Z")

</div>

That’s pretty much what I ended up doing. Since `uxpShowModal` is blocking waiting for a close reason, I added a `Resized` option to my `CloseReason` enum (TypeScript). My `ModalDialog.Open` class method intercepts this and re-opens the dialog box in a loop.

```auto
/**
  * Opens the modal dialog box.
  * @return Close reason.
  */
async Open(): Promise<ModalDialog.CloseReason> {
    
    let closeReason: ModalDialog.CloseReason = 
        ModalDialog.CloseReason.Unknown;

    do {

      if (closeReason === ModalDialog.CloseReason.Resized) {
        // Set a resizing flag to indicate the dialog is opening after a resize.
        this.isResizing = true;
      }

      // Show modal dialog.
      closeReason = await this.elDialog.uxpShowModal({
        title: this.title,
        resize: this.resize,
        size: {
          width: this.width,
          height: this.height,
        },
        minSize: {
          width: this.minWidth || 'auto',
          height: this.minHeight || 'auto',
        },
        maxSize: {
          width: this.maxWidth || 'auto',
          height: this.maxHeight || 'auto',
        },
      });

      // Reopen dialog box if performing a resize.
      
    } while (closeReason === ModalDialog.CloseReason.Resized);

    return closeReason;
  }

```

It works well, with the downside being that you see the dialog box disappear before it comes back. Hopefully some day we’ll get API methods to do this more cleanly.

---

<div class="post-metadata">

**Author:** ![tomzag](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/tomzag/32/2464_2.png) [@tomzag](https://forums.creativeclouddeveloper.com/u/tomzag)\
**Post date:** [October 17, 2022, 3:17pm UTC](https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350/5 "2022-10-17T15:17:05Z")

</div>

What is your use case? This probably helps to decide if it will be addressed in the future.

---

<div class="post-metadata">

**Author:** ![kbsanders](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kbsanders/32/2388_2.png) [@kbsanders](https://forums.creativeclouddeveloper.com/u/kbsanders)\
**Post date:** [October 17, 2022, 3:47pm UTC](https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350/6 "2022-10-17T15:47:41Z")

</div>

Use case is an expand/restore button on a Video Player modal dialog box that I have created.

When the user clicks the button to expand the dialog, I query the available display resolutions via `core.getDisplayConfiguration({});` and then resize the dialog box to fit within the smallest width and height detected while maintaining the video’s aspect ratio.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/9/9824840a0fa549ebdf606bf274b32dc0631fa25b.jpeg)

A curious side note, I noticed that Mac users get a green maximize button on their modal dialog title bars while Windows users only have the option to close the dialog.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/1/12f4e9e1aaf3a6cd7542fea5b4fdee1656eb9abc.png)

---

<div class="post-metadata">

**Author:** ![Imperator](https://avatars.discourse-cdn.com/v4/letter/i/76d3ee/32.png) [@Imperator](https://forums.creativeclouddeveloper.com/u/Imperator)\
**Post date:** [January 11, 2023, 3:02pm UTC](https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350/7 "2023-01-11T15:02:30Z")

</div>

This is super interesting. I have very similar requirements for two of my modal windows. Also one should also show tutorial video and another should have full screen size.  
I have not found which monitor is current active one where dialog is shown in core.getDisplayConfiguration({});. Do you have a solution here?

Also I am wondering if you publish your plugin in CC? As far I know such dialogs are not allowed and it should be refused. See my threat here: [Style guide?](http://forums.creativeclouddeveloper.com/t/style-guide/5641)  
“So a modal dialog needs always 40px padding, and dialog buttons at the bottom” otherwise these will not be approved.

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [January 6, 2025, 9:57am UTC](https://forums.creativeclouddeveloper.com/t/resize-modal-dialog-after-opening/5350/8 "2025-01-06T09:57:42Z")

</div>

Bumping this up too…

My use case: I open form dialogs using the same controller. Some forms have 2-3 fields and others 10-15, so I would like to resize dialog accordingly to perfectly fit the form