Angular/Material mat-datepicker 未显示在正确的位置答案

【问题标题】：Angular/Material mat-datepicker does not show in proper locationAngular/Material mat-datepicker 未显示在正确的位置
【发布时间】：2019-04-04 06:47:28
【问题描述】：

我正在将 Fuse 主题用于 Angular 网站。这是布局：

<div class="content p-24">
    <div fxLayout="column" fxLayoutAlign="start start" fxLayout.gt-md="row" fxFlex="50">
            <form class="mat-white-bg mat-elevation-z4 p-24 mr-24 mb-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto"
              name="form" [formGroup]="form">
    ...
              <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                <mat-form-field fxFlex="100">
                  <input matInput [matDatepicker]="picker" placeholder="Choose a Start date" (dateChange)="startDateChange()"
                    formControlName="start">
                  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                  <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
              </div>
    ....
    ...
    </div>
    </div>

但是日期选择器选择器没有显示在页面上的正确位置，它显示在页面右侧很远，因为它是 %100 宽度：

任何想法如何带到它所属的地方？

【问题讨论】：

标签： angular datepicker angular-material material-design angular-flex-layout

【解决方案1】：

我会推荐使用touchUi 标志。它将节省更多时间来调整日期选择器弹出窗口。

                <mat-form-field fxFlex="100">
                  <input matInput [matDatepicker]="picker" placeholder="Choose a Start date" (dateChange)="startDateChange()"
                    formControlName="start">
                  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                  <mat-datepicker touchUi #picker></mat-datepicker>
                </mat-form-field>

【讨论】：