Reduce the default width of mat-tab

Question

I would like to use mat-tab-group in a mobile app. The problem is the default width is bigger than my windows app. i would like to know how can i reduce the default width of mat-tab-group.

Answer 1

There are a few ways to reduce the width of the mat-tab-group.

1) Provide a custom class to your directive. On your component.html, we have added the .custom-tab-group class to the mat tab directive.

<mat-tab-group class="custom-tab-group">
    .
    .
    .
</mat-tab-group>

And on your css, define the class with the following properties

.custom-tab-group {
  width:200px
}

Check out the working demo here.

2) Overwrite the .mat-tab-group class on your main style.css. It is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration. Here is a demo.

.mat-tab-group {
  width: 200px!important;
}

3) On the component that uses the mat-tab, you will need to use the /deep/ shadow piercing to force the style. However, I would not recommend this method, as it will soon be deprecated. If you wish to use it, you will need to add the following css properties on your component.css file,

/deep/.mat-tab-group {
 width: 200px!important; /* you might or might not need to use the !important declaration */
}

I have added a working demo over here.