Scroll in Tabs

[vijaystroup]

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.

[sandercoffee]

Would it be because you are using "justify-center" in the parent div?

[vijaystroup]

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..

[harsh-1923]

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]

Produced the same result as wrapping above.

[vijaystroup]

@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.

[HMoen]

@vijaystroup , did you find a solution?

[vijaystroup]

@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.

[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.

[mineraux]

Please reopen it

[BertVanHecke]

Reopen. Issue is not resolved.

[randysmachado]

Reopen, I'm needed this

[vijaystroup]

Not solved yet.
@shadcn

[sotirelisc]

Please, reopen!

[marwanbukhori]

parking, look forward for this

[SweydManaf]

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 ❤️

[mrvfino]

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

[4doist]

Reopen pls

[gianicolajara]

      <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>

[burxtx]

How to add tailwindcss scroll snap align？

[abubakerx1da49]

I get somewhat workable code as:

<TabsList className='flex items-center justify-start flex-wrap h-auto space-y-1'> </TabsList>

[timreach]

      <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?