Changing the default position of Angular material dropdown and text

user_9541868 0
Viewed 3948

Im trying to change the position of Material dropdown panel to the bottom of the dropdown button. And trying to vertically center the name and arrow to the dropdown region. Please go through the image which I'm trying to achieve.

<div class="dropDown">
   <mat-select disableOptionCentering placeholder="Select any value">
     <mat-option *ngFor="let item of list" [value]="item">{{item}}</mat-option>
   </mat-select>
</div>


.dropDown{
 width:200px;
 height:40px;
 background-color: white;
 text-align: center;
 border: 1px solid grey;
 vertical-align: middle;
 }

enter image description here

angular-material angular css html
1 Answers

For the drop down displaying below the selection box, add reference the following css to the panelClass:

.myPanelClass{
    margin: 25px 0px;
}

Then for the centering of your text, reference the following css in the class:

.mySelectClass {
  padding-top: 12px;
}

and then add them into the html as so

<div class="dropDown">
   <mat-select disableOptionCentering 
               placeholder="Select any value"
               panelClass="myPanelClass"
               class="mySelectClass">
     <mat-option *ngFor="let item of list" [value]="item">{{item}}</mat-option>
   </mat-select>
</div>

here is a working stackblitz

user_89477480
Related