How to scroll content in a dialog? Overflow won't help

Photoshop UXP Plugin API
,
1

I have a dialog created with:

const dialogContents = `
    <sp-heading>Help</sp-heading>
    <sp-divider></sp-divider>
    <sp-body>Some text</sp-body>
`;

const dialog = document.createElement('DIALOG');
dialog.innerHTML = dialogContents;
document.body.appendChild(dialog);

dialog.uxpShowModal();

However, if <sp-body> has more content, it’s hidden at the bottom. overflow: scroll; also doesn’t help. How can I make all the content in the dialog available to read? Purpose of the dialog is a Help for the plugin

2

Hi, you’d need to define a height for dialog for the (vertical) scroll to work.

Something like that :
style="overflow-y: scroll;height: 250px"

Regarding options for .uxpShowModal(), you can use :

  • A string for the Title of the popup,
  • A resize option (both could be quite buggy),
  • Sizes for the dialog window (w,h)

Something like that :

const myTitle = "Lorem Ipsum";
aboutDialog = async () => {
  await document.querySelector("#aboutPanel").uxpShowModal({
    title: myTitle,  // string format
    resize: "none",  // "horizontal", "vertical", "both"
    size: {
      width: 450,  // px
      height: 300  // px
    }
  })
}

Hope this helps !

1 Like
3

Accepting this as a solution, because it kinda works :sweat_smile: Thank you
Kinda, because it’s usable only with fixed dimensions and no resize :slight_smile:

I believe this is a bug that Adobe should fix

4

Oh it should work with resize too.
In that case, try to put height:100% in your css instead of a number of pixels.

5

100% doesn’t work at all. Same as no height defined :slight_smile: Tried

6

That’s odd. I use that in one of my plugins for the “About this panel” pop up window. Works with resize on x and y and vertical scroll bar shows up if needed.

7

Aha… It works fine on <dialog> itself out of the box, but I wanted to make dialog resizable, but also have header and footer fixed. So I started playing around from what I had and ended up with height: calc(100vh - 200px) for the middle section and it seems to work perfectly :slight_smile:

Also found out, that you better have <sp-body> as the main content wrapper in a <dialog>, otherwise some unpredicted styling appears :roll_eyes: