How to customize mat-select dropdown position?

Question

Its been couple of days since i have not found the solution for this. As there is an option for mat-menu that is overlaptrigger property but there is no property to perform this in mat select dropdown. Is there any way to customize the mat-select dropdown position by overriding the css or any better solution.

Answer 1

<mat-select placeholder="Language" disableOptionCentering panelClass="myPanelClass">     <mat-option *ngFor="let locale of locales" [value]="locale">         {{locale}}     </mat-option> </mat-select> 

Utilize disableOptionCentering and panelClass like I have above. Then within your styles.scss reference your panelClass and do

.myPanelClass{     margin-top: 30px !important;  } 

This worked for me. Note that the scss must be in your styles.scss not your component's scss file. You might not need to use important here, I have other classes around this so I did use it.