search

radix-vue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
4.49k stars 256 forks source link

[Bug]: Weird classes added to body when opening a dropdown #205

Closed maelp closed 9 months ago

maelp commented 9 months ago

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

Any dropdown

Steps to reproduce

When I click on a dropdown it seems to add those classes to <body> which messes with the layout, not sure where this comes from?

padding-right: 8px; margin-right: 0px; --scrollbar-width: 8px; overflow: hidden; pointer-events: none;

Describe the bug

This changes the layout (add padding, etc) so it messes with the rendering and is annoying

Expected behavior

The <body> style shouldn't change when opening a dropdown

Conext & Screenshots (if applicable)

No response

maelp commented 9 months ago

it also adds this "focus guard" element

image
maelp commented 9 months ago

or perhaps due to useBodyScrollLock?

maelp commented 9 months ago

https://github.com/radix-vue/shadcn-vue/assets/15458/f1f2e1a7-1099-4a6a-acbd-a9c1124fe7e8

this is a screen recording to show the annoying effect, which causes a resize each time I open or close a dropdown, anywhere on the page (not necessarily against a border)

sadeghbarati commented 9 months ago

Based on the main radix-ui they also block the scroll with react-remove-scroll-bar and add your custom scrollbar size as a CSS variable to the body,

So you could fix other layout shifts in the elements with absolute or fixed positions

I think blocking scroll when the dropdown is open is a good decision they made cause it prevents redundant FloatingUI calculation for positioning stuff

I think there is some issue with your layout, we can help if you share your Live Site

maelp commented 9 months ago

hmmmm... so I guess there's an error in the setting of the scrollbar size? where can I set it? it must depend on the OS/browser no?

you can see the website at https://builder.gouach.com/

sadeghbarati commented 9 months ago

Add mr-[--scrollbar-width] or me-[--scrollbar-width] to this class fixed left-[450px] right-2 h-[85vh]

sadeghbarati commented 9 months ago

Also radix-vue Popover still has some bugs It will pops out of the screen

only shadcn-solidjs Dropdown (Popover) looks fine on mobile and desktop on the edge of the screen

https://www.solid-ui.com/docs/components/dropdown-menu

maelp commented 9 months ago

@sadeghbarati thanks this works! Can you explain to me why this works? why should I add this mr- class right at this place, and not to other component in my layout, and what was "broken" initially?

maelp commented 9 months ago

(and perhaps there's a better way to do my "fixed editor" layout with the top navbar, the fixed editor on the side, and the scrolling column on the right? but the only "hack" I found to make it work was to use this fixed classes)

sadeghbarati commented 9 months ago

Try sticky position with top: (size of your header)

maelp commented 9 months ago

That’s what I wanted to do originally, but unfortunately the size of the header is variable (on mobile some buttons go to next line, etc)

Fizzify commented 8 months ago

@maelp Try doing ":modal="false" to your DropdownMenu component

Credits: https://github.com/shadcn-ui/ui/issues/149

purohitdheeraj commented 6 months ago

in some cases modal prop doesn't works on dropdown (sveltekit) overiding the CSS can be also give quick fix

html body { overflow: auto !important; padding-right: 0 !important; }