Угловой / Материал циновки не отображается в нужном месте

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>