ui
ui copied to clipboard
shadcn-ui
Scroll in Tabs
https://ui.shadcn.com/docs/components/scroll-area https://ui.shadcn.com/docs/components/tabs
Looking to implement a elegant horizontal scroll in a Tabs component so I tried using a Scroll component around the Tabs Trigger components.
Outcome was not as expected:
Code:
<Tabs defaultValue='account'>
<div className='flex justify-center p-5'>
<TabsList className=''>
<ScrollArea orientation='horizontal'>
<TabsTrigger value='account'>Account</TabsTrigger>
<TabsTrigger value='password'>Password</TabsTrigger>
</ScrollArea>
</TabsList>
</div>
<TabsContent value='account'>
Make changes to your account here.
</TabsContent>
<TabsContent value='password'>
Change your password here.
</TabsContent>
</Tabs>
Without <Scroll/> performs normally:
Overflow of <TabsTrigger /> without <Scroll />:
Interested in a solution like this in the event more items get added to TabsList that overflow the parent container.
Would it be because you are using "justify-center" in the parent div?
Removing the wrapper produced the same overflow error as the screen shot; just starting at justify-start instead of justify-center.
However, removing the parent div and introducing the <ScrollArea /> component again, there seems to be some type of wrapping going on:
Couldn't get a fix with overflow scroll and display flex with no wrap though..
The orientation="horizontal" should be a part of <ScrollBar /> I guess.
Consider this structure once:
<Tabs> <ScrollArea> <TabList /> // {either map or individually} <ScrollBar orientation="horizontal" /> </ScrollArea> <TabsContent> </TabsContent? </Tabs>
@vijaystroup not sure why is @harsh-1923's solution working for you but here is a sandbox for your reference: LINK
That is odd. I am trying to reproduce with your code exactly within the ScrollArea but it is still overflowing without any scroll. I think it may be the div wrapper I have to center and pad the tab menu.
@vijaystroup , did you find a solution?
No unfortunately. Currently it is not a hindrance to my application, but it may be in the future, that is why I opened this issue now.
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.
The orientation="horizontal" should be a part of
<ScrollBar />I guess.Consider this structure once:
<Tabs> <ScrollArea> <TabList /> // {either map or individually} <ScrollBar orientation="horizontal" /> </ScrollArea> <TabsContent> </TabsContent? </Tabs>
work for me ❤️
Looking for this feature as well.
Here's a workaround I did for now:
<div className="relative rounded-sm overflow-x-scroll h-10 bg-muted">
<TabsList className="absolute flex flex-row justify-stretch w-full">
{tabs.map((value, index) => (
<TabsTrigger
className="w-full"
key={`tab_trigger_${index}`}
value={value}
>
{value}
</TabsTrigger>
))}
</TabsList>
</div>
Not ideal, but I used "bg-muted" on the outer div to give an illusion of a continuous bg for the tab list
<ScrollArea>
<div className="w-full relative h-10">
<TabsList className="flex absolute h-10">
{tabsHeadList.map(({ id, value, label }) => (
<TabsTrigger key={id} value={value}>
{label}
</TabsTrigger>
))}
</TabsList>
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
I get somewhat workable code as:
<TabsList className='flex items-center justify-start flex-wrap h-auto space-y-1'> </TabsList>
<ScrollArea> <div className="w-full relative h-10"> <TabsList className="flex absolute h-10"> {tabsHeadList.map(({ id, value, label }) => ( <TabsTrigger key={id} value={value}> {label} </TabsTrigger> ))} </TabsList> </div> <ScrollBar orientation="horizontal" /> </ScrollArea>
Thank yo so much @gianicolajara - this is great and solves the issue.
I set the scroll area component to render a div as per this discussion and then added pb-2 to make the bar render beneath the tabs instead of quatting the bottom padding of the TabTriggers. Is there a way to detect if the tabs have overflown or not so I can conditionally apply that pb?
