Dialog (Modal) with fixed height/width and scrollable content

[bennettdams]

Sometimes you want to use a modal as an "intermediate page" - situations where you show a lot of content, but don't want to switch routes. This could be done by having a huge modal (something like 3/4 screen height & width). Then, the content of the modal should be scrollable on the Y axis when there's not enough vertical space. Also, the header and footer of the modal (maybe a title at the top and some buttons at the bottom) are fixed/not scrolling.

I tried to use the Dialog (Modal) in React with (Y-)scrollable content, but failed.
Has someone already done that?

My first thought is using flex-grow, but I fail at having the right height of the modal. Without the height of the parent, grow does not work. I failed on giving the modal a fixed height/width, e.g. 3/4 of the screen's height/width.

Here's a CodeSandbox: https://codesandbox.io/s/naughty-water-22gmm?file=/src/App.tsx

Is the only real solution to create a custom class? For example something like h-screen-80 to get 80% of the display height, or are there better solutions with our native utilities?

[Sporesirius]

Hello @bennettdams, did you find a solution? I was trying to have a modal that is not covered on the entire screen and doesn't close if you click on e.g a navbar. Like you have it on the Modal picture.

[bennettdams]

Yes, by giving the inner container of the modal a fixed (viewport) height: style={{ maxHeight: "90vh" }} (could also create a custom Tailwind class, of course).

Then, the modal content has the automatic overflow:

<Dialog
  as="div"
  id="modal"
  className="fixed inset-0 z-10 overflow-y-auto"
  static
>
  <div className="min-h-screen">
    <div
      className={
        "inline-flex flex-col overflow-hidden" +
        ` ${!widthFromContent && "w-full max-w-md"}`
      }
      style={{ maxHeight: "90vh" }}
    >
      <Dialog.Title as="div">...</Dialog.Title>
      <Dialog.Description as="div" className="mt-4 w-full overflow-y-auto">
        {children}
      </Dialog.Description>
      ....
    </div>
  </div>
</Dialog>

[bennettdams]

I found a solution by giving the inner container of the modal a fixed (viewport) height: style={{ maxHeight: "90vh" }} (could also create a custom Tailwind class, of course).

Then, the modal content has the automatic overflow:

<Dialog
  as="div"
  id="modal"
  className="fixed inset-0 z-10 overflow-y-auto"
  static
>
  <div className="min-h-screen">
    <div
      className={
        "inline-flex flex-col overflow-hidden" +
        ` ${!widthFromContent && "w-full max-w-md"}`
      }
      style={{ maxHeight: "90vh" }}
    >
      <Dialog.Title as="div">...</Dialog.Title>
      <Dialog.Description as="div" className="mt-4 w-full overflow-y-auto">
        {children}
      </Dialog.Description>
      ....
    </div>
  </div>
</Dialog>

[andyscraven]

Solved it for me, thanks.

[Jasperrr91]

Just stumbled across this. If you're using Tailwind and don't want a custom class, simply do max-h-[90vh] instead of style={{ maxHeight: "90vh" }}.

[rosshabe]

This worked for me Thanks

[nhanitk14dev]

It worked for me. Thanks

[BrunoTAlcantara]

It worked for me. You can use too: <div className="max-h-[70vh]"> {content} </div>