设置minutesGap为1时ngx-material-timepicker显示样式异常

当将ngx-material-timepicker的minutesGap属性设置为1时，组件的分钟选择列表会因条目过多（共60项）超出默认容器高度，导致样式错乱（表现为列表内容挤压、滚动异常），具体效果如下：

问题代码 #

<mat-form-field>
  <mat-label>StartTime</mat-label>
  <input matInput readonly [ngxTimepicker]="timeStart" [formControlName]="'startTime'" [format]="24" />
  <ngx-material-timepicker-toggle [for]="timeStart">
    <mat-icon svgIcon="mat_solid:access_time" ngxMaterialTimepickerToggleIcon></mat-icon>
  </ngx-material-timepicker-toggle>
  <ngx-material-timepicker #timeStart [minutesGap]="1" disabled="false"></ngx-material-timepicker>
</mat-form-field>

解决方法 #

方法1：自定义CSS调整滚动容器高度

在全局样式文件（如styles.css）中添加以下样式，增加分钟选择列表的容器高度，让条目正常显示或滚动：

.ngx-material-timepicker__minutes-list {
  max-height: 300px; /* 根据实际需求调整高度 */
  overflow-y: auto;
}

方法2：升级组件到最新版本

该问题可能是组件旧版本的已知bug，执行以下命令升级到最新版本：

npm install ngx-material-timepicker@latest --save

升级后重新构建项目，检查样式是否恢复正常。

内容的提问来源于stack exchange，提问作者Aman Gojariya