@angular/material datepicker position

Question

I am using @angular/material2 module to add datepicker to my angular 4 app.

here is my HTML

<mat-form-field>
            <input matInput [matDatepicker]="picker" placeholder="Choose a date">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

app.module.ts

import {MatDatepickerModule,MatNativeDateModule,MatFormFieldModule,MatInputModule} from '@angular/material';

when I click on the datepicker toggler the datepicker popup is opened at the very end of the page completely outside the form field it should be opened at.

any help will be appreciated.

Answer 1

My problem was I had set .mat-form-field-underline to hidden. The date picker uses this element to determine position.