Mat-form-field имеет разную высоту в разных браузерах - PullRequest
Новая
       30

Mat-form-field имеет разную высоту в разных браузерах

0 голосов
/ 11 октября 2019

У меня нормальная форма с mat-form-field входами внутри. Форма содержит поле для даты и поле для часа. Поля выглядят хорошо в хроме:

enter image description here

Однако в Firefox и Microsoft Edge одно поле имеет большую высоту, чем другое:

enter image description here

Я не совсем уверен, что может вызвать такую ​​вещь, особенно в том, что мои компоненты не реализуют никаких специальных стилей для входных данных. Я просто использую Flex Layout

<!-- Date and Time Start -->
          <div fxFlex
               fxLayout.lt-sm="column"
               fxLayoutGap="2%"
               fxLayoutAlign.gt-sm="space-around stretch"
               fxLayout="row">

            <!-- Date Start -->
            <mat-form-field appearance="fill"
                            fxFlex
                            color="accent">
              <input id="inputDateStart"
                     matInput
                     [formControl]="startDate"
                     (dateChange)="startDateChanged($event.value)"
                     [matDatepicker]="pickerStart"
                     [max]="startDatePickerMax"
                     placeholder="ab">
              <mat-error>{{ getErrorMsgForDate() }}</mat-error>
              <mat-datepicker-toggle matSuffix
                                     [for]="pickerStart"></mat-datepicker-toggle>
              <mat-datepicker #pickerStart></mat-datepicker>
              <mat-hint>Ab Aufnahmedatum</mat-hint>
            </mat-form-field>

            <!-- Time Start -->
            <app-w-mat-timepicker color="accent"
                                  id="timePickerStart"
                                  placeholder="von"
                                  [timeFormat]="24"
                                  [(userTime)]="startTimeToFilterFor"
                                  (userTimeChange)="startTimeChanged($event)"></app-w-mat-timepicker>
          </div>

И мой компонент часов 

<div fxFlex
     fxLayout="row">


  <mat-form-field fxFlex
                  appearance="fill"
                  color="accent">
    <input matInput
           [placeholder]="placeholder"
           [value]="time">
    <mat-hint>Uhrzeit</mat-hint>
    <mat-icon matSuffix
              (click)="showPicker($event)"
              svgIcon="clock"></mat-icon>
  </mat-form-field>
</div>

Пример Stackblitz

1 Ответ

0 голосов
/ 11 октября 2019

Проблема была с иконкой DatePicker, она слишком большая!

Чтобы решить эту проблему, мне пришлось добавить иконку вручную в мой проект, а затем использовать его внутри компонента mat-datepicker-toggle.

Ссылка на этот ответ https://stackoverflow.com/a/48924487/4956266

...