Change Dialog theme so that the dialog is scrollable if it overflows …

…the viewport If the Dialog component is `position: fixed` but is taller than the viewport, this means that the bottom of the Dialog (which is below the bottom of the viewport) cannot be reached other than by expanding the window, as the Dialog remains fixed in space relative to the viewport. Changing the position setting to `relative` instead allows the Dialog to be scrolled, without the body moving. A workaround while this PR is being considered it to set the following theme option: ``` <ThemeProvider value={{ dialog: { styles: { base: { backdrop: { position: 'relative', }, }, }, }, }} > ``` The Dialog component is currently using floating-ui to handle blanking out the background of the screen, etc, and sets the `lockScroll` property. `lockScroll` does a number of different things, including hiding the scrollbar on the page and setting `overflow: hidden` on `<body>`.
creativetimofficial · Mar 12, 2024 · 873cb06 · 873cb06
1 parent 1fefd63
commit 873cb06
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/packages/material-tailwind-react/src/theme/components/dialog/index.ts b/packages/material-tailwind-react/src/theme/components/dialog/index.ts
@@ -46,7 +46,7 @@ export const dialog: DialogStylesType = {
       backdrop: {
         display: "grid",
         placeItems: "place-items-center",
-        position: "fixed",
+        position: "relative",
         top: 0,
         left: 0,
         width: "w-screen",