Mat-form-field has different height in different browsers

Issue

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

Solution

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

Answered By – Motassem Jalal

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.