Search code examples
angularinputdatepickerangular-materialposition

Angular material datepicker position

Im wondering if there is any chance to force material datepicker to always show below input. I dont want the datepicker to open depend on where i am on page (top or bottom). I want the datepicker to always position under the input no matter what. Any suggestions?

example from material page:

https://stackblitz.com/angular/qxybbyroank?file=app%2Fdatepicker-overview-example.ts

<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>
Solution

  • If you really don't care about the Datepicker being sliced at the end of the page then you just need a minor change in your CSS.

    .cdk-overlay-connected-position-bounding-box {
    position: relative !important;
}

    Take a look at this working example: https://stackblitz.com/edit/angular-bhkmby