How to control the overflow-x of Scroll-area

[marqly]

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.

[onurhan1337]

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.

[marqly]

Thanks for your response. We've tried that before, it didn't work!

The scrollarea still applying overflow:hidden!

[onurhan1337]

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.

[marqly]

Nothing worked unfortunately. A bit weird!
I've applied that to ScrollAreaPrimitive.Viewport as well.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[darseen]

I'm having the same issue

[kokordelisk]

Same here 😞

[lolcatswag]

Im having the same issue 😭

[KotaIkehara]

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.

[Adharsraj]

use this incase overflow y is hidden

className="[&>div>div[style]]:!block h-full"

[Cranbaerry]

use this incase overflow y is hidden

className="[&>div>div[style]]:!block h-full"

Does this not work anymore? The X is still being cut off

[Adharsraj]

please provide screenshot of the code @Cranbaerry

[Cranbaerry]

please provide screenshot of the code @Cranbaerry

Here's a snippet of the code, the ScrollArea is inside an AlertDialogContent (popup) and a form

<AlertDialogTitle className="mb-2">Data Diri</AlertDialogTitle>
<ScrollArea className="!mb-2 h-[calc(100vh-10rem)] sm:h-96 px-1">
    <p className="mb-2">Mohon isi data diri Anda dengan lengkap dan benar.</p>

    {/* Full Name */}
    <FormField
        control={form.control}
        name="fullName"
        render={({ field }) => {
            return (
                <FormItem className="mb-2">
                    <FormLabel>
                        Nama Lengkap
                    </FormLabel>
                    <FormControl>
                        <Input
                            placeholder="John Doe"
                            {...field}
                            value={field.value || ''}
                            onChange={e => {
                                field.onChange(e.target.value);
                                form.trigger('fullName');
                            }}
                            required
                        />
                    </FormControl>
                    <FormMessage />
                </FormItem>
            );
        }}
    />
</ScrollArea>