mat-stretch-tabs not working

[codegastudio]

Bug, feature request, or proposal:

mat-stretch-tabs has no effect

Desktop mode

"Mobile" mode (with or without mat-stretch-tabs)

What are the steps to reproduce?

<md-tab-group mat-stretch-tabs>
        <md-tab label="Infos"></md-tab>
        <md-tab label="Paiement"></md-tab>
        <md-tab label="Webradio"></md-tab>
</md-tab-group>

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

Angular 4.2.3
Material 2.0.0-beta.7
All browser

Try to alter directly min-width in css but has no effect too.
Help please this going me crazy :/

[codegastudio]

@MurhafSousli this not working anymore.
I test it before try mat-stretch-tabs.

[SvenBudak]

You dont need this. Just use:

.mat-tab-list {
  .mat-tab-label {
    @include mediaMax($resTablet) {
      flex-basis: 0;
      flex-grow: 1;
    }
  }
}

[codegastudio]

@BamiGorengo Thx, but could you develop @include mediaMax($resTablet) ?
i get No mixin named mediaMax error on angular-cli compilation

[SvenBudak]

@codegastudio Aight damn! My fault sorry! Yeah its one of my own Mixins.

This is the Mixin if you want it:

@mixin mediaMin($var) {
  @media only screen and (min-width: $var) {
    @content;
  }
}

Or simply use native MediaQueries:

.mat-tab-list {
  .mat-tab-label {
    @media only screen and (min-width: 900px) {
      flex-basis: 0;
      flex-grow: 1;
    }
  }
}

[codegastudio]

.mat-tab-list {
  .mat-tab-label[_ngcontent-c3] {
    min-width: 72px;
  }
}

Solved my pb
Your implementation was always overwrited by tabs js creation.
Thx

[codegastudio]

Damn _ngcontent-c3 could be change to _ngcontent-c10 or anything else so it's not possible to overwrite this class altered when tabs component is generated :/
Custom .mat-tab-label in css or any other class associated to an md-tab-label is ignored.
Force style déclaration directly in html is also useless cause the object is totally rewritten by tabs generator process

[codegastudio]

Ok so i found this solution

.mat-tab-list {
  div[role^='tab'] {
    min-width: 72px;
  }
}

[SvenBudak]

Just Setup your Component to encapsulation: ViewEncapsulation.None

[alexzaytsev-newsroomly]

ViewEncapsulation.None is a horrible suggestion; and the fix just above with role^ didn't work for me?

[vesrah]

I agree that disabling ViewEncapsulation is a terrible idea. If you want to fill the tab bar area and evenly distribute the tabs then this should work:

/deep/ .mat-tab-list {
  .mat-tab-label {
    flex-basis: 0;
    flex-grow: 1
  }