角材料日期选择器位置

Question

我想知道是否有任何可能迫使物料日期选择器始终显示在输入下方。我不希望日期选择器打开取决于我在页面上的位置（顶部还是底部）。无论如何，我都希望日期选择器始终位于输入下。有什么建议吗？

材料页面上的示例：

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>

Answer 1

如果您真的不关心在页面末尾切片Datepicker，那么您只需要对CSS进行一点改动即可。

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

看一下这个工作示例： https://stackblitz.com/edit/angular-bhkmby