Components: [Tabs] Labels reduce their width based on the screen rather than container

[maxime1992]

Bug, feature request, or proposal:

Probably a bug (?)

What is the current behavior?

Here's my app in desktop mode : (sidenav has a fixed width : 320px)

Notice the way tabs are displayed on the left :

When I open the app on my mobile :

1 or 2 versions of material2 before, tabs where displaying the same way.
I didn't take the time to open this issue before.

What is the expected behavior?

I'd like to have smaller tabs on desktop mode

What are the steps to reproduce?

Here's the funniest part : I tried to reproduce with a Plunkr : http://plnkr.co/edit/aGPvdK8qUL1jEBWXxYn4?p=preview

It's working as expected and not like on my site.

Still, I'm opening this issue in case there's some edge case you may be aware of.

Feel free to close it as I couldn't reproduce.

I didn't apply custom css so I don't understand where this is coming from.

If you really want to repro my problem, you can launch those commands to setup my project and you'll be running the app in a minute :

git clone https://gitlab.com/victornoel/petals-cockpit.git
git checkout ee685d5
cd petals-cockpit/frontend
yarn
ng serve

Then go to http://localhost:4200/workspaces/idWks0

Which versions of Angular, Material, OS, browsers are affected?

Material 2.0.0-beta.1
Ubuntu 16.10
Chromium 55.0.2883.87

[andrewseguin]

This is due to the CSS rule in tab-header.scss:

@media ($md-xsmall) {
  .md-tab-label {
    min-width: 72px;
  }
}

We say that if the screen is small, then the labels should change their min-width from 160px to 72px. I would say that rather than looking at the screen width, we should look at the tab header width instead.

For now to fix your issue, you can set your own custom CSS rule that always sets the min-width as 72px. We will consider how to modify this rule in the library so that it will use the tab header's width rather than the screen.

[maku]

@andrewseguin I have problems to set the labels width for a specific component.
I tried to define the css class (.md-tab-label) in a css file and defined it for a component via "styleUrls".
But this does not work...
Do you have a suggestion how I am able to do it?

[andrewseguin]

This is an issue with view encapsulation in Angular. The tab component dynamically adds in some of its own templating, and it won't be able to use your CSS defined in your component.

To resolve this, you can either place your styles in a stylesheet outside of your Angular app (this is what I do in my apps), or you can turn off view encapsulation in your component containing the tabs (encapsulation: ViewEncapsulation.None). Both in my opinion are not ideal but it's what we have to work with right now

[andrewseguin]

Additionally, in your case you probably just want to use the md-stretch-tabs feature in tabs: http://plnkr.co/edit/DIjIoK8byvQdaVUsF0Sw?p=preview

[M-a-c]

@andrewseguin can you explain what would need to be done to close this issue? The problem seems rather undefined / un-reproducible, are you opening a Pr to close this issue?

[codegastudio]

@andrewseguin md-stretch-tabs not working to stretch tabs in desktop browser with 2.0.0 beta.6 :/

[christophechevalier]

Temporary fix :

.html

    <md-tab-group fxFlex md-stretch-tabs>
      <md-tab label="Petals">
        <app-petals-menu-view></app-petals-menu-view>
      </md-tab>

      <md-tab label="Service">
        Some more tab content
      </md-tab>

      <md-tab label="Api">
        Some more tab content
      </md-tab>
    </md-tab-group>

.scss

.mat-sidenav-container > .mat-sidenav > .mat-tab-group > .mat-tab-header > .mat-tab-label-container > .mat-tab-list > .mat-tab-labels {
  .mat-tab-label[role^='tab'] {
    min-width: 72px;
  }
}

Related #5286
Thanks guys ! :pizza:

[jelbourn]

Closing this since I believe it's working as intended; the behavior falls into the category of "do something different on desktop/mobile"

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}