简体   繁体   中英

Angular 2 material mat-tab size

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 ?

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;
}

In my case the accepted answer didn't work well - when switching between tabs the width of body of specific tab was changing and it didn't look nice, so I added mat-tab-link to resolve it

::ng-deep.mat-tab-link,  ::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{
    min-width: 97px!important;
}

This worked for me

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

Without !important :

/* 
    ::ng-deep disables view-encapsulation of Angular components 
        -> to avoid global style bleeding use it in combination with :host
        -> https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
*/
:host ::ng-deep .mat-tab-label {
    min-width: 100px;
}

If you want to control the height and width of angular material tabs use styles followed by ::ng-deep . Check the below code to modify height and width

::ng-deep .mat-tab-label
{
  height: 27px !important;
  min-height: 5px!important;
  margin: 3px!important;
  width: 90px!important;
  min-width: 5px!important;
}

在此处输入图片说明

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM