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

[grant77]

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;
}

[crisbeto]

Note that the inline-block solution does fix the issue that is mentioned here, but it also introduces an issue with the mat-datepicker-toggle.

[grant77]

I updated the original comment to include a demo. If you open it in Edge you will see the bug. My fix is included in the demo but commented out inside of styles.scss. If you uncomment that you will see that inline-block does indeed fix the problem.

[crisbeto]

What I was saying is that it fixes the bug that's mentioned in the issue, but it introduces another one with the mat-datepicker-toggle.

[grant77]

I also have a mat-datepicker-toggle in the demo above. Uncomment out my fix inside of styles.scss.

[grant77]

Perhaps I should be using the term "workaround" instead of "fix". As far as mat-datepicker-toggle goes, it is already broken in IE, Edge, and Firefox. I am aware that "calc(0.59375em - 1px)" is not a solid fix for that.

[ebbnflow]

I'm having a similar issue with the suffix with outline... in edge it's rendered below the text but in mozilla it's rendered above the text. Standard renders fine. See here: https://stackblitz.com/edit/angular-3hxsdt

[NicolasBehra]

In my case, the following does the trick,

.mat-form-field .mat-form-field-prefix .mat-datepicker-toggle,
.mat-form-field .mat-form-field-suffix .mat-datepicker-toggle {
  button {
    &:active, &:focus {
      outline: 0;
      border: none;
      -moz-outline-style: none;
    }
  }
}

The above comments help me, and also this answer

Hope it helps someone :)

[naliniraju]

_This is working solution._
/* matdatepicker icon adjustment for IE11 issue */
.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 - 40px);
position: absolute;
margin-left:-40px;
}

[akiik]

For me, the datepicker icon was misaligned on FF when using apearance "outline".
Fixed with:

.mat-datepicker-toggle {
  display: inline-block;
}

macOS Mojave 10.14.6 FF 69.0

[NaigoApps]

My solution:
.mat-form-field-suffix{ align-self: center; }

[shweta21798]

:host ::ng-deep .mat-form-field-suffix { white-space: nowrap; flex: none; position: sticky ; }``

I had alignment issue while using matSuffix , i used the above styles ( position:sticky) and it got into perfect alignment.