[Tabs] Align left

[MattKetmo]

Description

Using full width to display tabs is not always the best experience especially when width is large (like on desktop or tablet) and there is few tabs.

It would be nice to have an option to have tabs aligned on the left instead of centered.

Even better tabs could be auto aligned on left or center according to the current container width and scroll would auto activate when this width is too small.

Images & references

This is the how tabs are currently displayed on "large" screen:

This is what I'd like to have:

An other example using Polymer paper tabs (in a toolbar):

And with Angular material:

[mbrookes]

@MattKetmo:

      <div style={{backgroundColor: 'sameAsTabs'}}>
        <Tabs value={window.location.pathname} style={{width: 200, float: 'left'}}>
          <Tab
            label="Item One"
            value="/"
            onActive={this.handleActiveTab}
          />
          <Tab
            label="Item Two"
            value="/item2"
            onActive={this.handleActiveTab}
          />
        </Tabs>
      </div>

This sets the Tabs container to the desired width. Alternatively you can probably set each tab to a fixed width, but I didn't try.

[MattKetmo]

Well… that's more a hack than a real solution. I don't want to force a fixed width to the tabs nor the container (and forcing a tab width will break the ink bar). I'd rather want it to naturally fit what's inside the tabs (text or icon) instead of expanding to max width.

[mbrookes]

@MattKetmo

Yes, it's a workaround for sure.

[oliviertassinari]

An initial migration of the Tabs component has been merged on the next branch.
That feature was implemented and is now the default behavior.
Thanks for providing those details.

[pavanmehta91]

@mbrookes I can't get the desired results using the technique. Can you help.

` <div style={{backgroundColor:'#4AA4B8'}}>
<Tabs
tabItemContainerStyle={{backgroundColor:'#4AA4B8',width:'500px'}}
contentContainerStyle={{backgroundColor:'#FFF'}}
value={this.state.value}
onChange={this.handleChange}
>
All the <tab tags

`

Initially it does not work i.e Tab A does not work but Tab B and Tab C works fine.

[pavanmehta91]

Here's the webpackbin link to it

https://www.webpackbin.com/bins/-KpxVgwKOLPfM8CFcu5-

[oliviertassinari]

@pavanmehta91 The issue was closed. Move to the v1-beta release if you need the feature.

[john-mbone]

Use this on Tab element
sx={{alignSelf:'start'}}