In angular7, how do i change the height of a mat-select when shows the list of items?

Question

In Angular7, how can I increase the height of a mat-select when it is showing the items? I have the following component file:

Answer 1

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)

Answer 2

Re the update, try to use max height instead of min.

If you use Gordans suggestion of @Input Panelclass, use 'panelClass=..." instead of '[panelClass]=...', otherwise the styling won't take affect.

Answer 3

FWIW, setting the option height has never been supported.

You must do css hack for change height.

source: https://github.com/angular/material2/issues/8054