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

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

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

Solution

Include the material css into your style.css file

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