Dialog with Scrollable Overlay

[jinkang-0]

Hello!

In my testing, it seems that the height of the dialog content is capped at 100dvh, and if it exceeds that, the content box will become scrollable. This isn't desirable, as ideally I'd like the content to extend as much as possible and allow the user to view the content by scrolling on the overlay - that is, the entire content box will move according to the scroll position of the overlay.

I realized that this is possible using Radix primitives by simply modifying the styles of the overlay component, but the overlay component seems to be abstracted away in Radix themes, replaced with a single Dialog.Content element.

With that being said, is it possible to achieve the same thing using Radix themes?

[vladmoroz]

This is going to be the default behaviour in the upcoming 3.0 release, out within the next couple weeks. See examples here:
https://themes-playground-modulz.vercel.app/test-dialog

You can already upgrade to the latest release candidate version, but beware of the long list of changes there.

[jinkang-0]

Great, thanks!

[ooridoori]

@vladmoroz hi this is the behavior I'm looking for - do you happen to have the source code example?

[flangham]

Same, I'm trying to create a Dialog with long text, but unable to scroll the dialog content

[virasasan]

@jinkang-0 Can you please share sample code to make the overlay scrollable using primitives? It would be greatly appreciated.

[jinkang-0]

The basic idea is to wrap the content within the overlay to allow the overlay to be scrollable. Something like this should work:

<Dialog.Root open defaultOpen onOpenChange={triggerNavigate}>
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 grid size-full place-items-center bg-black/50">
      <Dialog.Content className="rounded-lg bg-white p-10">
        <Dialog.Title />
        <Dialog.Description />
        <div className="h-300" />
        <Dialog.Close asChild>
          <Button>Close</Button>
        </Dialog.Close>
      </Dialog.Content>
    </Dialog.Overlay>
  </Dialog.Portal>
</Dialog.Root>

Note: This is using Radix primitives, not themes