Source:  Twitter logo

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.

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

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

    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.

54 users liked answer #0dislike answer #054
Nicholas Graham profile pic
Nicholas Graham

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

from timmoy:

Example usage:

    *ngFor="let creature of pokemon" 
{{ creature.viewValue }}
9 users liked answer #1dislike answer #19
Nadiia profile pic

try updating

.cdk-overlay-pane  { 
  transform:none !important; 

which is in @angular\material\prebuilt-themes\indigo-pink.css.

added transform:none !important; margin-top:22px; which is working well for me.

4 users liked answer #2dislike answer #24
Venu Kadiyala profile pic
Venu Kadiyala

I am using Angular. I have used the same property and it works fine with panelClass. But I used it this way [disableOptionCentering]="true"

4 users liked answer #3dislike answer #34
Himanshi Baranwal profile pic
Himanshi Baranwal

//Add this

    position: relative;
    top: 26px;

.mat-select-panel-wrap .mat-select-panel{
    min-width: calc(100% + 12px) !important;
    transform: translateX(4px) !important

//Change 26px, 12px and 4px to what suit you.

2 users liked answer #4dislike answer #42
andres profile pic

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).