Angular 2 material mat-tab size

Question

I have the following piece of code

  <mat-tab-group>     <div *ngFor="let question of subcategory.questions">         <mat-tab label={{question.question_id}} class="question-tab">{{question.question}}</mat-tab>     </div>   </mat-tab-group> 

which displays like:

However I want to reduce tabs width, like this:

The problem is, when I change css at run time, it adjusts fine, but when I put css like:

.mat-tab {   min-width: 50px !important; } .mat-tab-label[_ngcontent-c9]{     min-width: 50px !important; } 

It doesn't work. Any idea how to approach this ?

Answer 1

Try this:

/deep/.mat-tab-label, /deep/.mat-tab-label-active{  min-width: 0!important;  padding: 3px!important;  margin: 3px!important; } 

NOTE: In angular 8 /deep/ not working... you can use ::ng-deep, like so:

::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{  min-width: 0!important;  padding: 3px!important;  margin: 3px!important; }