webentwicklung-frage-antwort-db.com.de

Angular 2 Materialmatten-Tab-Größe

Ich habe den folgenden 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>

welches anzeigt wie: 

Ich möchte jedoch die Breite der Registerkarten wie folgt reduzieren: 

Das Problem ist, wenn ich CSS zur Laufzeit ändere, wird es gut angepasst, aber wenn ich CSS wie folgt setze:

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

Es funktioniert nicht. Irgendeine Idee, wie man das angeht?

angularangular-materialangular-material2
19
Aishwat Singh

Versuche dies:

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

HINWEIS : In angular 8 /deep/ Funktioniert nicht ... können Sie ::ng-deep Verwenden, wie folgt:

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

In meinem Fall funktionierte die akzeptierte Antwort nicht gut - beim Wechseln zwischen Registerkarten änderte sich die Breite von body einer bestimmten Registerkarte und es sah nicht gut aus. Deshalb habe ich einen Mat-Tab-Link hinzugefügt, um das Problem zu beheben

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