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.

hey, i got the same issue, i'm looking into the `panelClass` option of `mat-select`, but, i cannot find any solution... you did? — Flow, Dec 27 '17 at 15:13
@nour sorry there are way arounds but not an exact solution so we are still waiting for angular on this but instead of this you can use below links https://www.w3schools.com/howto/howto_css_dropdown.asp https://www.w3schools.com/howto/howto_js_dropdown.asp — Sumit Khanduri, Apr 01 '18 at 20:35

score 75 · Answer 1 · edited Jun 03 '19 at 14:59

75

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

edited Jun 03 '19 at 14:59

Nitsan Baleli

5,393
3
30
52

answered Aug 06 '18 at 16:28

Nicholas Graham

879
7
10

2

This should be the right answer. Important is not necessary as you described. It's also possible from the local style-file with ```::ng-deep``` – Marius Jul 11 '19 at 06:47
@Marius I noticed using `::ng-deep` as the first layer in component css introduce some strange behavior, at least using `ng serve`, which a global style is only applied upon this component load. So you might notice different style before and after loading this component if some other elements are affected by this global style. So now I always prepend `:host` in front, but then that won't work in this case. – Icycool Jul 17 '19 at 12:13
Remember to put that class in `styles.css` as buttons are created in overlay which is outside the component. – Krishna Apr 10 '20 at 10:44
i tried putting both disableOptionCentering and panelClass but i could not find the panelClass while inspecting the element. What could be the problem? – Kim Honoridez Jun 09 '20 at 07:18
@KimHonoridez did you add this to the styles.css? – Nicholas Graham Jul 08 '20 at 19:23
2

disableOptionCentering fixed the weird behavior I was experiencing with my select panel positioning. Thanks for that! – Nathanael Mayne Dec 15 '20 at 21:18
If you think this is the correct answer, please mark it. – Nicholas Graham Dec 16 '20 at 23:34

score 13 · Answer 2 · edited Aug 16 '23 at 10:58

I've found the solution as disableOptionCentering directive 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>

score 8 · Answer 3 · edited Feb 16 '21 at 09:48

8

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

edited Feb 16 '21 at 09:48

Masoud Keshavarz

2,166
9
36
48

answered Feb 16 '21 at 08:51

Himanshi Baranwal

81
1
1

score 6 · Answer 4 · edited Oct 05 '20 at 02:08

6

try updating

.cdk-overlay-pane  { 
  position:absolute;
  pointer-events:auto;
  box-sizing:border-box;
  z-index:1000;
  display:flex;
  max-width:100%;
  max-height:100%;
  transform:none !important; 
  margin-top:22px;
}

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

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

edited Oct 05 '20 at 02:08

DinoMyte

8,737
1
19
26

answered May 15 '20 at 08:03

Venu Kadiyala

89
1
3

Good solution but it messes up the positioning of auto-complete dropdowns. – Khepf Jan 14 '22 at 12:32

score 5 · Answer 5 · answered Jun 22 '20 at 08:44

//Add this

.mat-select-panel-wrap{
    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.

How to customize mat-select dropdown position?

5 Answers5

Linked