Angular 7. ngx-material-timepicker，切换按钮未正确对齐

Question

我正在使用ngx-material-timepicker创建日期和时间选择器。

这是我模板的相关部分。 （我没有该组件的额外CSS）

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <mat-form-field>
        <input
          matInput
          [matDatepicker]="picker"
          placeholder="Choose a date"
          [min]="minDate"
          [(ngModel)]="chosenDate"
          (ngModelChange)="dateChanged()"
        />
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </div>
    <div class="col-sm-6">
      <mat-form-field>
        <input
          matInput
          [ngxTimepicker]="timePick"
          placeholder="Chose time"
          [min]="minTime"
          [(ngModel)]="chosenTime"
          (ngModelChange)="timeChanged()"
        />
        <ngx-material-timepicker-toggle
          [for]="timePick"
        ></ngx-material-timepicker-toggle>
        <ngx-material-timepicker
          [defaultTime]="minTime"
          #timePick
        ></ngx-material-timepicker>
      </mat-form-field>
    </div>
  </div>
</div>

结果是这样的：

日期选择器工作正常，但是时间选择器的切换按钮未正确对准。我遵循了official documentation

如何像日历一样对准时钟？

Answer 1

尝试将input和toggle-button包装在div中，并将display: flex设置为该div。像这样：

<div>
  <input>
  <ngx-material-timepicker-toggle></ngx-material-timepicker-toggle>
</div>

Css：

div { display:flex }

Answer 2

我也遇到了同样的问题，但是您要做的就是将MatSuffix添加到ngx-material-timepicker-toggle上，它将正确对齐按钮。

<ngx-material-timepicker-toggle matSuffix [for]="timePick" ></ngx-material-timepicker-toggle>

Answer 3

据我所知，您正在使用<input matInput [matDatepicker]="picker" />

要解决此问题，因为ВиталикБойко建议将它们都包装在div中并应用div { display:flex }

此外，使用更改时间选择器的高度

CSS

::ng-deep .ngx-timepicker { height: 72% !important; }