角/材质垫日期选择器未在正确的位置显示

Question

我正在将Fuse主题用于一个有角度的网站。这是布局：

<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，显示在页面的右侧很远：

有什么想法去了解它的归属地吗？

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