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

I've found the solution as disableOptionCentering direcrive for mat-select, so after using this dropdaown can be customized.

from timmoy: https://github.com/angular/material2/pull/9885

Example usage:

<mat-select
    [(ngModel)]="currentPokemon"
    [required]="pokemonRequired" 
    [disabled]="pokemonDisabled" 
    #pokemonControl="ngModel" 
    disableOptionCentering>
<mat-option 
    *ngFor="let creature of pokemon" 
    [value]="creature.value">
{{ creature.viewValue }}
</mat-option>
</mat-select>

Answer 2

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

Answer 3

I am also using this disableOptionCentering with mat-select and panelClass but I am facing issue when dropdown position is at the bottom of the page and I do have multiple options in my dropdown. When I scroll in the dropdown and select the last option then overlay goes up and calculate wrong offset based upon the margin-top given in the panelClass definition.

Please find the logged issue reference here https://github.com/angular/components/issues/18045