Mat-form-field has different height in different browsers

user_4956266 0
Viewed 1238

I have a normal form with mat-form-field inputs inside. Form contains a field for date and a field for hour. The fields are looking good in chrome:

enter image description here

However, in Firefox and Microsoft Edge the one field has a bigger height than the other:

enter image description here

I'm not really sure what might cause such thing, especially that my components don't implement any special styles to the inputs. I'm just using 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>

And my clock component

<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 example

angular-flex-layout angular-material angular css
2 Answers

The problem was with the icon of the datepicker, it is too big!

To solve this, I had to add the icon manually to my project and then use it inside the mat-datepicker-toggle component.

Reference this answer https://stackoverflow.com/a/48924487/4956266

user_49562660

The answer of Motassem Jalal is correct. The icon of the datepicker is too big.

But you don't have to add your own icon. You can simply change the the font-size in the mat-datepicker-toggle component.

For example:

  mat-datepicker-toggle {
    font-size: 10px;
  }

and in html:

  <mat-form-field appearance="fill">
    <mat-label>Label</mat-label>
    <input matInput [matDatepicker]="dateToPicker" />
    <mat-datepicker-toggle matSuffix [for]="dateToPicker"></mat-datepicker-toggle>
    <mat-datepicker #dateToPicker></mat-datepicker>
  </mat-form-field>
user_168126730
Related