Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MatButton as MatSuffix with appearance=outline renders horribly in Edge and IE11.

See original GitHub issue

Bug, feature request, or proposal:

MatButton as MatSuffix with appearance=outline renders horribly in Edge and IE11. I can fix it by overriding one line in button.scss. This is closely related to #11650, but not exactly because my fix for this does not fix that one. See “Is there anything else we should know?” below for details.

What is the expected behavior?

The button should be aligned with the input.

What is the current behavior?

The button is much lower than the input.

What are the steps to reproduce?

This demo will show the bug if you open in Edge. My fix is commented out inside of styles.scss. Just uncomment it and they everything will look good.

https://stackblitz.com/edit/angular-material2-issue-ztyb2u

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

It is very ugly and my users will not like it.

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

“@angular/material”: “^7.0.0-beta.2”

Is there anything else we should know?

The display block part in button.scss appears to be the problem:

// Align icon-buttons correctly inside of standard, fill, and outline form-field appearances.
.mat-form-field:not(.mat-form-field-appearance-legacy) {
  .mat-form-field-prefix,
  .mat-form-field-suffix {
    .mat-icon-button {
      display: block;  <========================== bad
      font-size: inherit;
      width: 2.5em;
      height: 2.5em;
    }
  }
}

I am using css instead of scss in my project, so my fix is to add this to styles.css:

.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button, 
.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button {
    display: inline-block !important;
}

This does NOT fix #11650. To fix that, I did the following, however, I am highly doubtful that this is the proper fix, but it does the trick for this project:

.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-datepicker-toggle,
.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-datepicker-toggle {
    top: calc(0.59375em - 1px);
    position: relative;
}