CODEWITHSUNDEEP
angularangular-material
Sumit Khanduri
Sumit Khanduri

Reputation: 3798

How to customize mat-select dropdown position?

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.

Upvotes: 46

Views: 100468

Answers (5)

Nadiia
Nadiia

Reputation: 141

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>

Upvotes: 14

Himanshi Baranwal
Himanshi Baranwal

Reputation: 81

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

Upvotes: 8

Venu Kadiyala
Venu Kadiyala

Reputation: 89

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.

Upvotes: 6

andres
andres

Reputation: 51

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

Upvotes: 5

Nicholas Graham
Nicholas Graham

Reputation: 948

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

Upvotes: 82

Related Questions