Material-ui: [Tabs] Width not fully functional

[inoc603]

I'm trying to set the width of tabs through tabWidth property of Tabs, as in the following code:

<Tabs tabWidth={75}>
  <Tab label='tab 1'>
    <h1>tab 1</h1>
  </Tab>
  <Tab label='tab 2' >
    <h1>tab 2</h1>
  </Tab>
</Tabs>

But in the rendered page, only the width of the ink bar under the tab is changed, and the actual tab's width didn't change. Any idea how to fix this?

[Zadielerick]

@inoc603 That prop was not working with me either; The way I did it was, using the tabItemContainerStyle prop and passing the width of that. In your case, the width would be the total width of your tabs, so if each is 75px, then 75 x 3 = 225. So, pass:
< Tabs tabItemContainerStyle={{width: 225}} > ... etc and it will resize the tabs so that they all have an equal length of 75px

[inoc603]

@Zadielerick Thanks for the solution. It works like a charm.

Though I think the tabs should resize themselves, if tabWidth is specified and the total width of the tabs does not overflow the container. May be should make a PR to fix this?

[Zadielerick]

@inoc603 Yeah, I have been working on fixing the Tab and Tabs, and I noticed that it has that prop that doesn't really work and styling them is tedious, so that may be the next thing that will be fixed in them. #1166

[shaurya947]

PR #1232 was merged to address this. The Tab component has a width prop -- I bet that would work for your use case @inoc603. The Tabs component no longer has a tabWidth prop, perhaps removed in favor of the finer control over each tab using the width prop. Closing for now.

[aweary]

@shaurya947 the width property on <Tab> doesn't seem to do anything. It looks like the width of the tab is being calculated by the <Tabs> component instead. We're looking to have our tabs at a width of ~200px and aligned to the left, not centered and stretched to the full width of the page, and it doesn't seem to be working.

[kevinsproles]

+1 on the width property on <Tab> being needed. We're looking for each tab to be the same width as the text label for that tab.

[oliviertassinari]

The tabWidth property was removed from the component. I'm closing the issue.