angular mat-select with ngModel binding opens dropdown at bottom of the screen

Question

The below select element works fine.

<select name="state" #state="ngModel" [(ngModel)]="service.empFormData.state">

     <option value="" selected></option>
     <option value="ALABAMA">ALABAMA</option>
     <option value="ALASKA">ALASKA</option>
     <option value="ARIZONA">ARIZONA</option>

</select>

When this is changed to

<mat-form-field appearance="outline">

   <mat-select name="state" #state="ngModel" [(ngModel)]="service.empFormData.state" >
     <mat-option value="" selected></mat-option>
     <mat-option value="ALABAMA">ALABAMA</mat-option>
     <mat-option value="ALASKA">ALASKA</mat-option>
     <mat-option value="ARIZONA">ARIZONA</mat-option>
   </mat-select>

</mat-form-field>

the dropdown opens up at the bottom of the screen.This happens with mat-datepicker too.Anybody have an idea on this

yes...adding the below statement @import "~@angular/material/prebuilt-themes/indigo-pink.css"; solved theissue. Wont this css be added when installing angular/material itself. thanks — PRI, Jun 09 '22 at 08:11

score 0 · Accepted Answer · answered Jun 09 '22 at 08:14

0

Include the material css into your style.css file

@import "~@angular/material/prebuilt-themes/indigo-pink.css"

answered Jun 09 '22 at 08:14

cfprabhu

5,267
2
21
30

angular mat-select with ngModel binding opens dropdown at bottom of the screen

1 Answers1