Responsive?

[rohan-deshpande]

Great component!

Any thoughts on making these responsive? There's some nice ideas here using Bootstrap 3 tabs.

[dmitry]

@rohan-deshpande by the time I'm using https://github.com/maslianok/react-responsive-tabs

[sgilligan]

my preference is to transform into a drop down rather than accordion (for mobile scenarios) eg https://codepen.io/jpkempf/details/Awxbo

[dmitry]

What if dropdown is too long?

[sgilligan]

yes, the dropdown would need some smarts to make it scrollable if there were too many elements for the available space.

[MartinHaeusler]

I just ran into this issue as well. This library does everything a tabsheet needs to do (and does it nicely) except for proper overflow handling. I guess this has to be some CSS media query magic in the background to make it happen?

I'm fine with either the dropdown or left/right scroll buttons (slight preference for the dropdown). I just would like to avoid:

• tabs becoming unreachable for the user (except by resizing the window)
• showing the vanilla browser scrollbar

[stephen-oconnor]

Any plans to make this responsive?

[bmsterling]

For those that are interested, I did fork this repo to make a responsive version similar to what @sgilligan posted: https://github.com/localmotors/react-tabs

You can see in action: https://launchforth.io/styleguide/react/

[sgilligan]

nice! exactly what I was looking for. @dmitry if the drop down is long, it wouldn't be any different to the length of an accordion style implementation. I like the implementation from @bmsterling as when selected, the UI is keep minimal which is great on mobile.

[grawlinson]

Any plans for forking the changes back into this repo? Would be nice.

[danez]

@bmsterling I think this can be done now with react-tabs itself by simply doing.

<Tabs>
  <div className="react-tabs__menu is--open">
    <TabList> ... </TabList>
  </div>
  <TabPanel>content</TabPanel>
</Tabs>

or as HOC:

export default function MyTabList(props) {
  return (
    <div className="react-tabs__menu is--open">
      <TabList>{props.children}</TabList>
    </div>
  );
}

MyTabList.tabsRole = 'TabList';

And it needs the css changes obviously. It would be nice to have an example in the repo that shows how this works, but I currently don't have time to do that.

[bmsterling]

@danez thanks, I'll give it a pass this week.

[Frozzy6]

is this task still relevant?

[brunocramos]

I'm more into horizontal scrolling on mobile, simply adding:

@media (your-own-screen-restrictions) {
  .react-tabs__tab-list {
      display: block;
      overflow-y: auto;
      width: 100%;
      white-space: nowrap;
  }
}

[KoolTheba]

The last example by @brunocramos i'm afraid is vertical, no horizontal. I've tried many different ways and there is no way to make TabList horizontally-scrolled. Anything, please, despite almost 3 years have past since the last comment?? 🙏

[joepvl]

@KoolTheba you can try the following snippet:

.react-tabs__tab-list {
  display: flex;
  overflow-x: auto;
}

[TechStudent10]

Are there any plans to build this into the main lib? It's been over a year since the last response.

[joepvl]

@TechStudent10 no, it's out of scope. Using some of the code from this thread you should be able to do it yourself without much fuss.

[jpveilleux]

I find it hard to believe that in 2023 (even when this thread was created all the way back in 2016) that responsive support is "out of scope". I mean ... you should be mobile first in fact...

[deflexable]

@joepvl how do you enable horizontal scroll on <TabPanel />

[joepvl]

@deflexable this is an HTML/CSS question, not a React Tabs question. If I were learning CSS now while trying to answer this question for myself I'd start by figuring out how to get any container to scroll its content horizontally. My first go-to would be these properties and values:

 display: flex;
 white-space: nowrap; 
 overflow-x: auto;

But I'm sure there are other ways to do it, depending on your exact use case.

@jpveilleux I understand that you'd like for this library to support your use case without any fuss, but from my point of view it's not the "responsive support" that's out of scope — it's supported, there is nothing stopping consumers from writing responsive CSS for the DOM structures generated by this library. What is out of scope is adding opinionated CSS that prescribes a specific way of making tabs responsive. That is not what this library is about.