CODEWITHSUNDEEP
reactjsmaterial-ui
user2616355
user2616355

Reputation: 463

How to force tab to fit to small space in Material UI?

As per doc, I tried fullWidth, centered for tabs, Does not seem to work. How do force tabs to re-adjust to given screen size ?

I am using latest beta v23enter image description here

Upvotes: 5

Views: 8482

Answers (2)

LuckyBlakc
LuckyBlakc

Reputation: 31

I came here when I was looking for how to make the width of the tabs relative to the contained text. So here how i solved it acording to previous answer.

items.map((item) => (
<Tab
  style={{ 
    minWidth: `${item.title.length}` + `em`,
    paddingInline:'2em'
  }}
/>
))

Upvotes: 0

Rikku
Rikku

Reputation: 438

I think the easiest way to force the tabs to fit a smaller container width, would be:

<Tab style={{ minWidth: 50 }} label="item" />

The default minimums are 160px for medium-and-up, 72px for small-and-down screen sizes.

Depending on how small the fit should be, you can also do other kinds of overrides on padding and font. I tried out a few techniques on CodeSandbox.

Remember, the more we compact the tabs, the worse usability. There should be other workarounds too! For instance, shortening the label texts, using icons, or restructuring.

Upvotes: 13

Related Questions