Search code examples
angularangular-materialangular-material2

md-tab label does not show completely in mobile view

I'm using a md-tab-group to represent a bunch of tabs as follows:

<md-tab-group md-stretch-tabs>
    <md-tab label="ALL">
        ...
    </md-tab>
    <md-tab label="MAPS">
        ...
    </md-tab>
    <md-tab label="NEWS & EVENTS">
        ...
    </md-tab>
    <md-tab label="STAFF">
        ...
    </md-tab>
</md-tab-group>

The labels appear fine on the browser on my desktop, but as soon as I switch to mobile view, the "NEWS & EVENTS" tab label gets cut off. All I can see (depending on the screen size) is "NEWS &" and the rest of it is cut off. Even if I click on the tab, the full label is not displayed.

Is there any way for the entire label to be displayed?

Solution

  • The problem here is that you are using md-stretch-tabs attribute in your md-tab-group.

    md-stretch-tabs will stretch your tabs group header bar and give an equal width to all the tab labels. Remove that property and you'll get it working as you want.

    Update plunker demo.