Components: How to style md-tab?

[RedFour]

How do I style the md-tab?

I've created a few test tabs using the documentation. But I can't figure out how to make the tab's width to be smaller. The default width is too large for mobile screens.

<md-tab-group selectedIndex=0>
  <md-tab style="width:50px">
    <template md-tab-label>Tab1</template>
      <h1>Some more tab content</h1>
      <p>...</p>
    <template md-tab-content>
    </template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Tab2</template>
    <template md-tab-content>
      <h1>Some more tab content</h1>
      <p>...</p>
    </template>
  </md-tab>
</md-tab-group>

[jelbourn]

This would fall under #123

[hstevensagain]

@jelbourn, @RedFour seems to specifically be talking about this, which doesn't look slated for theming at the moment. Dynamic changes to the width of the tabs probably aren't in the scope of app wide theming either.

Imo md-tab-labels shouldn't have a min-width. They should expand and contract to the width of the md-tab-group, keeping the tabs responsive after that is the developer's job.

I get that there is a lot more work to be done on md-tabs, for the mean time changing the min-width: 160px; to width: 100%; would make md-tabs a lot more usable and responsive.

[RedFour]

@hstevensagain thx! the css code you gave worked!

/deep/ .md-tab-label {
  min-width: 1px !important;
}

[sebaswn]

@hstevensagain @RedFour I'm having the same problem, but the css code above isn't working... any other workarounds?

[ravinderpayal]

@RedFour where did you added this code

[luisfpg]

@RedFour @ravinderpayal Actually the class name is mat-tab-label.
Hence, the correct style is:

.mat-tab-label {
  min-width: 1px !important;
}

[mist3r3]

Do you know how we can do the same on only one tab? tried pretty much everything without success.

[axhcypod]

can we open this? I can't get anyone of these examples working..

[captain-melanie]

@mist3r3 you can specify the element number

/deep/ .mat-tab:nth-child(1) {
    min-width: 100px !important;
  }

[jdewell]

What if you need smaller tabs on only one page not the entire application.

[jdewell]

I got the page I wanted the smaller tabs like this:
#groupTabGroup ::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{
min-width: 0;
padding: 3px;
margin: 3px;
}
I had to give the mat-tab-group an id and specify that id in the css.

[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._}