ui
ui copied to clipboard
shadcn-ui
[bug]: Layout Shift when Opening Select Component
https://github.com/shadcn-ui/ui/assets/119763173/ce8560fa-2d8f-4970-aaa8-0dfb8d40eebe
Can you provide a sandbox with the issue? Do you have overflow rules on <html> rather than <body>?
Can you provide a sandbox with the issue? Do you have overflow rules on
<html>rather than<body>?
Layout
Page
Component
Try to remove overflow-x-hidden on <html>. Cant really reproduce the issue from screenshots. So i guess that could fix it.
Try to remove
overflow-x-hiddenon<html>. Cant really reproduce the issue from screenshots. So i guess that could fix it.
I actually added it when you commented on your previous comment to test it out, but it didn't work. It's kinda puzzling.
I had the same issue, removing the class of body to a new div under the body solved the issue.
I have the same issue and this is my code:
<html lang="en">
<body>
{children}
</body>
</html>
)
if for some reason anyone wants to solve this without moving all of body's classes into a new child div you can add "min-w-full" to body. added the ! for overkill
body { @apply !min-w-full; }
It seems like the solution provided above didn't resolve my issue. Here's what worked for me: I found that the problem was caused by the container of the select component being centered using mx-auto. Instead, I fixed it by making it fixed and centrally positioned using the left and right properties. It's not the cleanest solution, but it did the job.
https://github.com/shadcn-ui/ui/assets/125253203/071e7c51-4e3b-459f-a22d-87bd66c20f0d
i get the same issue but more drastic.
c4bee2075a0940265dce10d721b22300.mp4 i get the same issue but more drastic.
I get the same problem, i able to work around it, below are the example.
<div className='items-center flex my-8 container'> // parent container
<p>Content</p>
<div className='flex gap-4 flex-1 justify-end items-center'> // (dropdown component) in className don't forget "flex-1"
<ModeToggle />
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent align='end'>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
What I think causes this is radix ui which is used by shadcn, it altering the styling, this causes to hide all other elements scrollbar that causes their parent to take the size where the scrollbar is located. In this case the body which style is set to w-full ( take all available space ). So whenever the scrollbar disappears, the body will take that space that's why it shifts
There's couple of solutions I tested out myself, but this one works for me
Make the body width to viewport and hide the overflow horizontally
- global.css
body {
margin: 0;
padding: 0;
}
html,body,:root {
height: 100%;
}
- layout.tsx
<body className="w-screen overflow-x-hidden ...otherstyles">
</body>
I also changed my custom navbar w-screen as it is also affected by the shifting
- nav.tsx
<header className="fixed top-0 w-screen ...otherstyles">
Here's gif of what I experience & the fix
https://github.com/shadcn-ui/ui/assets/48374007/3dfab276-94d3-4f03-980f-df45fd44f6b0
I hope this helps 😄
I encountered the same issue and was able to resolve it by removing all classes from the body element and adding a child div:
BEFORE:
<html>
<body className='container mx-auto'>
{children}
</body>
</html>
AFTER:
<html>
<body>
<div className='container mx-auto'>
{children}
</div>
</body>
</html>
I have the same issue and this is my code:
<html lang="en"> <body> <div> {children} </div> </body> </html> )
make another div in body and pass children and also remove the body css from global css or your main file
that worked for me, that data attribute is added once the select is open
body[data-scroll-locked]{
min-width: 100%;
}
Does anyone have a plain CSS solution? I'm not using Next, I'm using Vite, and my application isn't wrapped in a single-body tag. If there's no other solution I'll do that, but I don't feel like adding layouts JUST for this yk?
Does anyone have a plain CSS solution? I'm not using Next, I'm using Vite, and my application isn't wrapped in a single-body tag. If there's no other solution I'll do that, but I don't feel like adding layouts JUST for this yk?
if u are using vite try to add this to your css
body[data-scroll-locked] #root{ min-width: 100%; }
Does anyone have a plain CSS solution? I'm not using Next, I'm using Vite, and my application isn't wrapped in a single-body tag. If there's no other solution I'll do that, but I don't feel like adding layouts JUST for this yk?
if u are using vite try to add this to your css
body[data-scroll-locked] #root{ min-width: 100%; }
the layout shift still appears, its because when i close the select, the vertical scrolling of the page appears, i need to find a way to remove all vertical scrolls when dialog is open
Does anyone have a plain CSS solution? I'm not using Next, I'm using Vite, and my application isn't wrapped in a single-body tag. If there's no other solution I'll do that, but I don't feel like adding layouts JUST for this yk?
if u are using vite try to add this to your css
body[data-scroll-locked] #root{ min-width: 100%; }the layout shift still appears, its because when i close the select, the vertical scrolling of the page appears, i need to find a way to remove all vertical scrolls when dialog is open
Please have you been able to fix this? I'm facing the same issue.
Does anyone have a plain CSS solution? I'm not using Next, I'm using Vite, and my application isn't wrapped in a single-body tag. If there's no other solution I'll do that, but I don't feel like adding layouts JUST for this yk?
if u are using vite try to add this to your css
body[data-scroll-locked] #root{ min-width: 100%; }the layout shift still appears, its because when i close the select, the vertical scrolling of the page appears, i need to find a way to remove all vertical scrolls when dialog is open
Please have you been able to fix this? I'm facing the same issue.
I haven't, yet, I believe by the end of this week I'll try to debug it and maybe fix it, but I'm still left with no answers
Okay. I've spent quite a while on this and I can't really figure out what is wrong. I just noticed that if I remove some elements from the page it works fine. Please share your solution if you fix it. Thanks.
I have the same issue. I have a Select component inside Dialog, when I open the dialog, the data-scroll-locked property is added to the body. When I open the select component, the same property seems to be added, but when I close the select component, it removes the property, even when the dialog is still open.
I faced a similar issue, but with vertical layout shift. The cause was what @IvarK mentions - the rule body[data-scroll-locked] that is being applied once it opens. Overriding the vertical padding there fixed it for me.
I have the same issue. I have a Select component inside Dialog, when I open the dialog, the
data-scroll-lockedproperty is added to the body. When I open the select component, the same property seems to be added, but when I close the select component, it removes the property, even when the dialog is still open.
I'm experiencing this exact issue. Did you find a solution?
Pass something like this in comp if you are facing the same issue with dropdown
<DropdownMenu modal={false}>
For select you can do this
html {
overflow-x: hidden;
}
Ideally we won't need to worry about layout shifts. Hopefully this won't be the case in the future :D
