CODEWITHSUNDEEP
angularinputdatepickerangular-materialposition
wantToBeAProgrammer
wantToBeAProgrammer

Reputation: 179

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>

Upvotes: 2

Views: 7153

Answers (1)

WSD
WSD

Reputation: 3587

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

Upvotes: 1

Related Questions