mat-select: how to show all options without scrolling?

Question

I'd like to disable the scrollbar when I have more than 5 options:

Code:

https://stackblitz.com/edit/angular-select-size?file=app/select-overview-example.html

Demo:

https://angular-select-size.stackblitz.io

I tried to use the "size" option, however I found that is not available:

<mat-option ng-size=8 *ngFor="let food of foods" [value]="food.value">
  {{food.viewValue}}
</mat-option>

Answer 1

Previous answers did not work directly for me and I needed ::ng-deep (/deep/ to be deprecated see - What do /deep/ and ::shadow mean in a CSS selector?)

i.e.

::ng-deep .mat-select-panel {
  max-height: none !important;
}

::ng-deep .mat-select-panel {
  max-height: 400px!important;
}

Answer 2

//add this code to you styles.css

   ::ng-deep .mat-select-panel{
       max-height: none!important;
    }

Answer 3

You can edit the height of the select panel.

Add this code to your styles.css

.mat-select-panel {
  max-height: 400px !important;
}

The number 400px is a random one. If your data are too many you must add a bigger number.

https://stackblitz.com/edit/angular-select-size-8vkutp

Answer 4

Add this code to you global styles.css

.my-select.mat-select-panel{
  max-height: none!important;
}

Include panelClass="my-select" property in the mat-select component.

Answer 5

Solution if you don't want to use !important. The panel takes the id of the mat-select with -panel suffix :

<mat-select id="dumb-id"
...

::ng-deep #dumb-id-panel {
  max-height: none;
}