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.

v1: tabs that are scrollable do not center

See original GitHub issue

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

Expected Behavior

Tabs that receive the prop centered should always center.

Current Behavior

They remain left aligned if they are also set scrollable.

Steps to Reproduce

https://codesandbox.io/s/kk371k1w75

Your Environment

Tech	Version
Material-UI	@next
React	16.2.0
browser	chrome

Issue Analytics

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

Top GitHub Comments

28reactions

amakkcommented, Sep 14, 2019

I have an alternate solution for centered + scrollable tabs and is not dependent on media queries, so works with dynamic number of tabs. Seems to work in Chrome, Firefox and Safari. Does anyone see any issues with this approach?

https://codesandbox.io/s/material-ui-centered-scrollable-tabs-ud26w

6reactions

thiagohohcommented, Nov 26, 2020

I modified @abhisheksarka code to:

 const scrollableTabs = useMediaQuery(theme.breakpoints.down('sm'));
<Tabs variant={scrollableTabs ? "scrollable" : "standard" } scrollButtons="on" centered={!scrollableTabs}>
</Tabs>

And it worked.

Top Results From Across the Web

How can I center the scrollable tab? - Stack Overflow

It is because the container of the Tabs has the same width as the Tabs. You should be able to wrap the Tabs...

Tab bar | Framework7 v1 Documentation

When you have a lot of links and they all don't fit into view, then it could be useful to use scrollable Tab...

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

The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs ...

Visualization Element 'Tabs' - Schneider Electric

The element displays selected visualizations in tabs. The tabs can be ... If there is not space for all tab headers, then a...

jQuery-ui Scrollable tabs plugin v1.0 - Google Code

make tabs closable · control animation speed · control easing · can make the wrapper resizable (depends on jQueryUi.resizable plugin) · navigate to...