Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Tabs] Support "auto" as "scrollable" value

See original GitHub issue

When using <Tabs scrollable> with few tabs, the first tab seems not properly aligned to the left. I need the ability to auto-set the scrollable behavior based on the screen width and the number of tabs.

This is a v1.x issue.
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would like tabs that are scrollable when there isn’t enough width, but not scrollable otherwise. The scrollable prop should be automatically enabled based on whether the screen is large enough to display all the tabs or not. Therefore, setting scrollable to true or false doesn’t work - I’d need an auto value.

I know I can use withWidth to do that in userland, but it’s just such a common need that I believe it should be implemented in core.

Current Behavior

scrollable can only be set to true or false, so the tabs always look bad:

if I have scrollable but a very large screen, the first tab isn’t properly aligned
if I have scrollable=false but a narrow screen, I can’t get to the last tab

Context

I’m developing a component that can contain an arbitrary number of tabs - from a few to many. In the latter case, the scrollable option is a must. But when enabled in the first case, the first tab isn’t properly aligned on the left:

2018-08-01_1523

Issue Analytics

State:
Created 5 years ago
Reactions:6
Comments:10 (5 by maintainers)

Top GitHub Comments

6reactions

gino-mcommented, Sep 20, 2018

IMO this is still an issue from a UX perspective, since without any affordance indicating the tabs are scrollable, users have no reliable way to know there are more tabs off screen. On the other hand, the additional space mentioned by the OP required with scroll=“auto” makes desktop UIs look broken. Could this issue be reopened so it can be revisited?

In the meantime, here’s a hacky workaround I came up with to hide/show the scroll buttons when the tab width exceeds that of the container (on window resize and when adding tabs): https://codesandbox.io/s/q34yxjkmwj

Maybe this could be added to the Tabs impl, controlled by a prop like scrollHide=“auto|on|off”, for ex?

2reactions

fzaninottocommented, Aug 13, 2018

IMO It’s not ideal on desktop screens to hide buttons, but I can live with that. Thanks for your answer.

Top Results From Across the Web

[Tabs] Support "auto" as "scrollable" value #12358 - GitHub

I would like tabs that are scrollable when there isn't enough width, but not scrollable otherwise. The scrollable prop should be automatically ...

Material-ui Tabs - how can I put scroll of them - Stack Overflow

TabList accepts a prop variant="scrollable" which sets the scrollable property and also provide a little arrows indicator on sides.

Building a Tabs component - web.dev

In this post I want to share thinking on building a Tabs component for the web that is responsive, supports multiple device inputs, ......

Scrollable Tabs - TabStrip - Kendo UI for Angular - Telerik

This option accepts values of type TabStripScrollButtonsVisibility , which are: auto (Default)—The scroll buttons will be automatically shown if the tabs do ...

scroll-behavior - CSS: Cascading Style Sheets - MDN Web Docs

The scroll-behavior property is specified as one of the keyword values listed below. Values. auto. The scrolling box scrolls instantly. smooth.