Components: Datepicker with appearance=fill renders wrong in IE11 and Edge

[hblieb]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

In IE11 and Edge, Datepicker should render properly when appearance is set to "fill," "standard" or "outline."

What is the current behavior?

In IE11 and Edge, Datepicker is significantly taller than it should be. (OK in Chrome)

What are the steps to reproduce?

Take the basic datepicker example from Angular material docs, Add appearance="fill" then view in IE11 or Edge.
https://stackblitz.com/edit/angular-8jkfsk?file=app/datepicker-overview-example.html

What is the use-case or motivation for changing an existing behavior?

When form fields are side-by-side, this throws off the alignment

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.2, Internet Explorer 11, Microsoft Edge browser.

Is there anything else we should know?

Looks good when appearance=legacy

[crisbeto]

Spent some time looking into this one yesterday, but wasn't able to find a decent cross-browser solution. For future reference, the issue seems to come from the fact that we're using align-items: baseline to align the input and the prefix/suffix.

[padilla-jm]

It's an issue in Firefox too but the height difference isn't as dramatic as in Edge and IE11.

[kolinlob]

For me replacing mat-datepicker-toggle with ordinary mat-icon worked in IE and Edge

<mat-form-field appearance="fill">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-icon matSuffix (click)="picker.open()" style="cursor:pointer; color:#777;">today</mat-icon>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

However, I'm not aware about possible downsides of such solution, since I'm quite new to Angular

[kctang]

This issue should not be closed if Angular Material supports IE 11.

[kings100]

Adding following lines into styles.css solved this issue for me:

.mat-form-field-flex {
  align-items: center !important;
}

[Splaktar]

@kctang the issue isn't closed and hasn't been closed 😄

[kctang]

Ops! Apologies...please ignore my earlier comment. i must have been too stressed trying to get things to work properly on IE11 at that time. 😅

[abheist]

Adding following lines into styles.css solved this issue for me:

.mat-form-field-flex {
align-items: center !important;
}

@kings100 are there any side-effects.
If not, you can add a pull request for it.

[starquake]

This seems to fix the issues. Not sure about side-effects. Will keep my eyes open and report back.

[lupeportias]

@abheist just don't put another input with a custom prefix in the same form... lol
Chrome looks like this:

in Edge:

[omar306]

To apply appearance="fill" style if it not working with attribute you can add it as a class
<mat-form-field appearance="fill" class="full-width mat-form-field-appearance-fill">

[Splaktar]

@omar306 FYI, you spelled appearance wrong in your attribute, that may be why it wasn't working. I've updated your comment above to use the correct spelling.