web-dev-qa-db-ja.com

Angular 2マテリアルマットタブサイズ

次のコードがあります

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

次のように表示されます： 

しかし、私はこのようにタブの幅を減らしたいです： 

問題は、実行時にcssを変更すると正常に調整されますが、cssを次のように配置すると、

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

動作しません。これにアプローチする方法はありますか？

angularangular-materialangular-material2
19
Aishwat Singh

これを試して：

/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 ... ::ng-deepは次のように使用できます：

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

私の場合、受け入れられた答えはうまくいきませんでした-タブを切り替えると、特定のタブのbodyの幅が変化し、見栄えがよくなかったので、mat-tab-linkを追加して解決しました

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