angular - 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.