Search code examples
reactjsuser-interfacetabsmaterial-uiappbar

Adjusting Tab Width in Material UI App Bar

I am pretty new to Material UI, but it is super cool! However, I would like to decrease the width of each tab panel/label, so all three labels appear at once.

Notice how the last label, Upload, is currently falling off of the sidebar. enter image description here

I based my AppBar based on this one from Material UI. Any suggestions?

I am basically trying to decreasing the spacing in an example like this between "Page One", "Page Two", and "Page Three"

Solution

  • I don't have enough points to comment, but if you notice your codeSandbox, the <Tabs /> component adjusts correctly to the width available.

    Your problem can be:

    1. the parent component has overflow and lets the <Tabs /> grow more than you expect.

    2. there isn’t enough space for the tabs to grow equally, so per material ui spec they should be scrollable.

    You can try to decrease the tabs padding with the CSS API or respect the spec. I advise the latter.