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.
By clicking “Sign up for GitHub”, you agree to our
terms of service
and
privacy statement
. We’ll occasionally send you account related emails.
Already on GitHub?
Sign in
to your account
I'm having an issue making the overflow-x of scroll area visible. I've got some cards within a vertically scrollable area, the cards has a hover effect that has a large shadow, the shadow is cut from the x sides! I'm trying to figure out how I can make overflow-x visible with no success! Tried to add a custom class and try to customize it with custom css but with no success.
The issue you're experiencing is due to the overflow-hidden class on the ScrollAreaPrimitive.Root component. This class is hiding any content that goes outside the boundaries of the component, including your shadow.
To fix this, you can remove the overflow-hidden class. However, this might cause other layout issues depending on the rest of your code. If you still want to hide the overflow in the y-direction but show it in the x-direction, you can use the overflow-x-auto and overflow-y-hidden classes instead.
@/components/ui/scroll-area.tsx
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-x-auto overflow-y-hidden", className)}
{...props}
In this code, overflow-x-auto will make the x-direction overflow scrollable, and overflow-y-hidden will hide the y-direction overflow. This should allow your shadow to be visible on the sides.
Thanks for your response. We've tried that before, it didn't work! 
The scrollarea still applying overflow:hidden!
If the ScrollAreaPrimitive.Root component from @radix-ui/react-scroll-area is applying overflow: hidden by default and it's not being overridden by your classes, you might need to use inline styles to force the overflow properties.
<ScrollAreaPrimitive.Root
ref={ref}
style={{ overflowX: 'auto', overflowY: 'hidden' }}
className={cn("relative", className)}
{...props}
In this code, the style prop is used to apply inline styles to the component. Inline styles have higher specificity than classes, so they should override the default styles of the component.
Please note that using inline styles can make your code harder to maintain and should generally be avoided if possible. However, in this case, it might be necessary if the component is applying styles that you can't override with classes.
If this still doesn't work, it's possible that the ScrollAreaPrimitive.Viewport or another child component is also applying overflow: hidden. You might need to apply the same inline styles to these components as well.
I hope it's solve your issue.
Here's my code that resolved the issue:
<ScrollArea className="[&>div>div[style]]:!block">
The issue radix-ui/primitives#926 might help to solve this issue.
yashskhandelwal, chaptone, rakib-vivasoft, araaso-dev, reinaka, and davidkrupa reacted with thumbs up emoji
araaso-dev reacted with heart emoji
All reactions
