Position modal at the top of the page

[dprothero]

When you open a modal, it appears in the middle of the page. If something happens to adjust the height of the content, the modal adjusts it's position to maintain a vertically centered appearance.

It would be nice if I could tell the modal to appear at the top of the page (with probably some default margin) so that as the height of the modal changes, the actual position of the modal isn't moving, it remains fixed to the top of the page.

See this site for an example. Click the Search button in the upper right to open the modal. As you type search terms and results are populated, it shifts your search input box to the top, which isn't ideal.

[gloriliale]

Hi @dprothero! I see what you mean, thanks for including the example link for clarity! Let me consult the team to see if there's any way to do this with our current component.

[shleewhite]

Hey @dprothero

The easiest fix would be to a minimum height layout in the modal body like this:

<Modal>
  <ModalBody>
    <Box minHeight='size20'>
      // modal content goes in here
    </Box>
  </ModalBody>
</Modal>

You could maybe include an empty state to fill up some of the space?

[loreina]

Hi @dprothero, following up here. Was the fix above able to help with the modal positioning?

[dprothero]

Not really, (to my taste, anyway). It's a lot of blank space even with an empty state image.

[SiTaggart]

Hi @dprothero

I think for now this is a good observation that we'll keep an eye on due to the fact you're the first and only person to mention it. Doesn't mean you're wrong, just a singular data point.

For now, our priority is creating product consistency so only having one way to position a modal for us is a good thing. If we see more folks having the same observation and we have good evidence to support it, we can look to add it. I know, the irony of using the Algolia modal on our docs page which does something different isn't lost on me. I might try and align it to ours.

In the meantime we do offer a modal primitive which allows you to provide your own custom styles to a modal if you really need it. https://paste.twilio.design/primitives/modal-dialog-primitive

Thanks for continuing to make Paste better by giving us feedback!

[dprothero]

All good!