CODEWITHSUNDEEP
htmlcssangularangular-material
Bhanu Prakash War
Bhanu Prakash War

Reputation: 168

Changing the default position of Angular material dropdown and text

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

Upvotes: 3

Views: 10373

Answers (2)

Dheeraj
Dheeraj

Reputation: 1

This will help:

disableOptionCentering="true"

Upvotes: -1

rhavelka
rhavelka

Reputation: 2386

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

Upvotes: 2

Related Questions