Material: How to make tabs full width

Created on 22 Oct 2014  路  4Comments  路  Source: angular/material

I have only two tabs in md-tabs and want them to take up the whole screen width (half each, see pic2). How can I do that (by default it looks like pic1)?

------------------------------------------------
| ITEM1 | ITEM 2 |
------------------------------------------------

pic 2
------------------------------------------------
|         ITEM1        |          ITEM 2       |
------------------------------------------------
enhancement

Most helpful comment

I tried this today and it didn't stretch the tabs with md-stretch-tabs="yes", instead of 'yes' specify the value as 'always'.

All 4 comments

This can be accomplished by adding the following attribute to your <md-tabs> element:

<md-tabs md-stretch-tabs="yes">

This was added here: 6397040e4ff47ad318ca5729b7da3753c9b56c17

Instead of using <md-tabs md-stretch-tabs="yes">, we should now simply use <md-tabs md-stretch-tabs>.

I tried this today and it didn't stretch the tabs with md-stretch-tabs="yes", instead of 'yes' specify the value as 'always'.

Thanks guys for your help it works.

Was this page helpful?
0 / 5 - 0 ratings