You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If HeadlessUI opens a listbox/dropdown/etc., there are two styles applied to the body: overflow: hidden; padding-right: 15px overflow: hidden; removes the scrollbar, so there is a padding applied, which is calculated by the scrollbar's width. This should avoid shifts in the layout due to the missing scrollbar.
I have two issues with this:
Issue 1: Scrollbar offset if height is exactly 100vh
If the page's height exactly equals the inner height of the browser window (e.g. Tailwind class min-h-screen), there is no scrollbar shown. (There is nothing to scroll obviously.) But padding-right: 15px is still applied.
(If the page's height is smaller than the browser window, there is padding-right: 0px applied instead. This should also be the case for page height = browser height.)
Issue 2: ListboxOptions also gets scrollbar offset
If ListboxOptions has the class overflow-y-scroll(see here), the same 15px scrollbar offset will be added to ListboxOptions, even though there never was any scrollbar at all.
This happens especially when using the Catalyst UI Listbox component. I also have this issue on https://catalyst.tailwindui.com
Screenshots
This is a screenshot from the minimal reproduction linked above. The two red bars show, where the 15px offset correction is applied.
This is a screenshot from the Catalyst docs, where you can also see the padding.
The text was updated successfully, but these errors were encountered:
What package within Headless UI are you using?
@headlessui/react@2.0.0-alpha.4
What browser are you using?
Chrome + Safari
Reproduction URL
https://github.com/simonedelmann/headlessui-demo
Describe your issue
If HeadlessUI opens a listbox/dropdown/etc., there are two styles applied to the body:
overflow: hidden; padding-right: 15px
overflow: hidden;
removes the scrollbar, so there is a padding applied, which is calculated by the scrollbar's width. This should avoid shifts in the layout due to the missing scrollbar.I have two issues with this:
Issue 1: Scrollbar offset if height is exactly 100vh
If the page's height exactly equals the inner height of the browser window (e.g. Tailwind class
min-h-screen
), there is no scrollbar shown. (There is nothing to scroll obviously.) Butpadding-right: 15px
is still applied.(If the page's height is smaller than the browser window, there is
padding-right: 0px
applied instead. This should also be the case forpage height = browser height
.)Issue 2: ListboxOptions also gets scrollbar offset
If
ListboxOptions
has the classoverflow-y-scroll
(see here), the same 15px scrollbar offset will be added toListboxOptions
, even though there never was any scrollbar at all.This happens especially when using the Catalyst UI Listbox component. I also have this issue on https://catalyst.tailwindui.com
Screenshots
This is a screenshot from the minimal reproduction linked above. The two red bars show, where the 15px offset correction is applied.
This is a screenshot from the Catalyst docs, where you can also see the padding.
The text was updated successfully, but these errors were encountered: