Resize modal dialog after opening?

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()?

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.

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

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.

/**
  * 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.

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

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.

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

1 Like