Stopping angular material mat-select from overflowing off screen

Question

I'm adding a mat-select to my angular application based on the following example: here

However, one thing I don't like about this select is that if I choose a value and reopen to select another option, the list will have snapped to the chosen option, and half my list may be above and half below where the actual selector is on screen

I've read the angular material documentation but can't see any option to override this default. Is there some way I'm missing to do this or does anyone have any sample css on how to do this? Alternatively any reasons from a UI perspective why I shouldn't override this?

Thanks

str8up7od str8up7od · Accepted Answer · 2020-01-16T21:37:16

I had a similar problem of the select "overflowing off screen" and used MatSelect's panelClass property to help solve it.

I used it to set the max-height

my.component.html

<mat-form-field class="form-fields">
      <mat-select matNativeControl
                  panelClass="max-height" <!-- see this here  -->
                  placeholder="Task"
                  (selectionChange)="validate()"
                  [formControl]="task">
        <mat-option *ngFor="let task of tasks"
                    [value]="role.code">{{ role.name }}</mat-option>
      </mat-select>     
</mat-form-field>

styles.scss

.max-height {
  max-height: 175px !important;
}

And that solved it for me.

Stopping angular material mat-select from overflowing off screen

1 Answers