Can you disable html overflow="hidden" when Dialog is open?

[JakeSchroeder]

Opening a dialog sets the HTML element inline style as "overflow: hidden"
I am assuming this is to prevent scrolling, however:
This is causing elements with position: sticky to disappear.

headlessui-overflow-issue.mov

[christian-reichart]

same problem, making this optional would be great.

Or maybe change this behaviour to overflow: clip, which is relatively new though: https://caniuse.com/?search=overflow%3A%20clip

[EricDotSmith]

I'm also having a similar issue here: #2305

Did you figure out a work around for this problem?

[christian-reichart]

I switched to the Dialog of Reach UI

[EricDotSmith]

I just tried playing around with it and while it's really great it doesn't quite have the feel I want from a modal like the HeadlessUI Dialog does. I'm thinking of just keeping it and accepting the flicker for now, albeit I hope the team or someone else from the community can figure out why this is happening and fix it.

I'm using this almost line for line: https://headlessui.com/react/dialog

[christian-reichart]

If you want a predefined component you could look broader, the main benefit of HeadlessUI and Reach is that you can customize everything. If you don't need it, there are probably many UI kits out there that do the job.

[EricDotSmith]

Also I can confirm the issue is the overflow: hidden. So far I can't find a good way to override this while maintaining the same behaviour 🤷‍♂️

[psugihara]

Anyone figure out a fix for this? Hitting the same thing with a sticky header.

RPReplay_Final1681919010.MP4

[EricDotSmith]

I would love to know an answer to this as well. But in the meantime I'm considering switching my modals to use preline. Idk if their modals have this issue or not but we'll see.

[sean-clayton]

Having this exact issue with my project: https://github.com/13vaults/13vaults.com/blob/218f092d851c2e5f2f23114c7153c62438db7dbe/components/mega-nav.tsx (https://www.13vaults.com). I only just now realized it was a bug with the dialog component + a sticky element. Losing my hair for weeks over this 😅

Would love to see a way to address this--it might just be a thing only a webkit update can fix though 😿

[sean-clayton]

@reach/dialog works just fine for my use-case. See the diff here how I refactored my component to use @react/dialog and framer-motion instead of headless-ui's dialog and transition components: 13vaults/13vaults.com@d13f471#diff-a75fd728c03405a0d9e680b949580052ab2c5b741a579b1f9daa71dc430d1f3c

[tourlida]

where we should at this class?

[sean-clayton]

It looks a lot like a chat-gpt generated response.

[robinsimonklein]

Yeah, jQuery has nothing to do here...

[benjaminarteaga]

Same issue here... Please provide a solution.

[juanmanuel-so]

Same issue :(

[v-dev-cl]

Same issue with the current version 1.7.15.

[v-dev-cl]

In my case was my own fault, I had set the element in a sub element causing the issue, so just moving the element one level upper fixed my issue.

[ITSFerroli]

I solve this issue forcing to use always the css property that i want, like so:

html { overflow: clip !important; }

so the inline overflow hidden style is ignored.

[maple146]

This fixed my issue, thanks a lot!

[christian-reichart]

If you need to support Safari, overflow: clip might not be a good solution yet, it's not really supported sadly.

[jessems]

I got around this with a bit of a hack:

  useEffect(() => {
    let timer: number;

    if (open) {
      timer = setTimeout(() => {
        const html = document.documentElement;
        html.style.overflow = 'auto'; // revert to default overflow
      });
    }

    return () => {
      clearTimeout(timer);
    };
  }, [open]);

Wrapping it in a setTimeout puts it in a different execution cycle (I guess). You don't even need to introduce an actual delay.

[alaminShaheen]

doing this makes the body scrollable even when the dialog is open.

[dada878]

I have a sticky sidebar, and when a Headless UI modal opens, the sidebar will not stay sticky.
The following code solved the issue in my case.

html {
  overflow: visible !important;
}

or using tailwind

 <html className="!overflow-visible">...<html>

[alex-carter-mobdev]

html:has(dialog[open]) {
/* remove the main scrollbar when dialog is open */
overflow: hidden;
}
this will help

[saimonkat]

Fix for this issue, which you can use in global.css/main.css

@layer base {
  html {
    @apply !overflow-visible !p-0;
  }
}

[aminkhadivar]

I fix this issue, you must add styled in custom.css .

body {
    overflow: unset !important;
}

[n3ps]

Can someone explain the reasoning behind Headless UI adding padding and overflow by default?

[KevinDevNull]

I think, apply overflow-x: clip; in body should solve the problem.

[LosGlennos]

I don't have this issue with Dialog, but I've had this issue with Popover and Listbox. Writing this to help people who has this problem with other types of components as well. These components has a modal property which you can set to false. This helps with keeping the stickiness, but it's not optimal as focus disappears and you can scroll what's behind the open component.

Example

<PopoverPanel
    as="ul"
    portal
    anchor="bottom end"
    **modal={false}** >

As stated, it's not a perfect solution.. have anyone found anything better yet?

[emadha]

use modal={false} in MenuItems

<MenuItems modal={false}>