In angular7, how do I change the height of a mat-select when shows the list of items?
Like this helpful answer to a similar question already states there are a couple of ways you can solve this problem and which one you choose depends on whether you want to apply your rules globally or locally. None of the following examples require you to change the ViewEncapsulation type of your component.
Local override
Using ::ng-deep you can simply override the styles of both the trigger and the panel that are being rendered in child components of your component. Important: ::ng-deep has been marked as deprecated and while it still works there is no guarantee it will do so in future.
select-multiple-example.component.css
::ng-deep .mat-select-trigger {
min-width: 80vw;
}
::ng-deep .mat-select-panel {
max-height: 80vh !important;
}
select-multiple-example.component.html
<mat-form-field>
<mat-select placeholder="ITEMS" multiple>
<mat-option *ngFor="let item of items" [value]="topping">{{item}}</mat-option>
</mat-select>
</mat-form-field>
DEMO (I edited your code for the purpose of the demo)
Global override
This will apply your overrides to all triggers or panels within your application.
styles.css
.mat-select-trigger {
min-width: 80vw;
}
.mat-select-panel {
max-height: 80vh !important;
}
DEMO (overrides can be found in /assets/styles/material-override.scss)
Flexible override
Using the @Input pannelClass on your MatSelect (mat-select) will allow you to apply different overrides depending on your use case and independent from other selects in your app.
styles.css
.panel-override {
max-height: 80vh !important;
}
.panel-override-2 {
max-height: 100px !important;
}
select-multiple-example.component.html
<mat-form-field>
<mat-select placeholder="ITEMS" multiple [panelClass]="applyPanelOverride2 ? 'panel-override-2' : 'panel-override'">
<mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
DEMO (note the checkbox in the toolbar)