Angular 2 material mat-tab size
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;
}
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;
}
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;
}