Нестандартный макет элемента управления датером - PullRequest
Новая
       16

Нестандартный макет элемента управления датером

0 голосов
/ 28 марта 2019

Я работал над приложением на основе календаря с Angular 7.2 на внешнем интерфейсе и переходил к использованию Angular Material для реализации основных элементов управления и диалоговых окон пользовательского интерфейса.

Я вижу странное поведение макета с компонентом выбора даты.

В некоторые месяцы это выглядит правильно, как показано здесь: https://imgur.com/RbhXZnK

В другие месяцы наблюдается странное вертикальное растяжение: https://imgur.com/wxNQ6fY

У меня есть настроенные MetroUI и Twitter Bootstrap в файле проектов angular.json, но удаление их, похоже, не имеет никакого эффекта. В самом компоненте диалога нечего менять, так как на этом этапе компонент предельно прост.

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';
...