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; }

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

Angular 7. ngx-material-timepicker, toggle button not properly aligned

timepicker

angular-material

angular