Question

我一直在使用前端为Angular 7.2的基于日历的应用程序，并且一直在使用Angular Material来实现基本的UI控件和对话框。

我看到日期选择器组件出现奇怪的布局行为。

在某些月份，它看起来正确，如下所示：https://imgur.com/RbhXZnK

在其他月份，它表现出奇怪的垂直拉伸：https://imgur.com/wxNQ6fY

我确实在项目angular.json文件中配置了MetroUI和Twitter Bootstrap，但是删除它们似乎没有任何效果。对话框的组件本身没有太多更改，因为该组件在此阶段非常简单。

对话框组件的HTML：

<h2 mat-dialog-title>Goto Date</h2>
<mat-dialog-content>
  <mat-form-field>
    <input matInput [matDatepicker]="gotoDate" [formControl]="date" />
    <mat-datepicker-toggle matSuffix [for]="gotoDate"></mat-datepicker-toggle>
    <mat-datepicker #gotoDate></mat-datepicker>
  </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
  <button mat-button [mat-dialog-close]="true">Go</button>
</mat-dialog-actions>

angular.json样式和脚本：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/metro4/build/css/metro-all.css",
  "node_modules/fullcalendar/dist/fullcalendar.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/metro4/build/js/metro.min.js",
  "node_modules/moment/min/moment.min.js",
  "node_modules/fullcalendar/dist/fullcalendar.min.js"
]

项目的styles.css：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

奇数材料日期选择器控件布局

0 个答案: