The label on a mat form field with Outline with a prefix not aligning inside a dialog

[abannsunny]

Bug:

Form-Field-Outline-Label-Gap does not reposition correctly when it is opened in a dialog and the Form-Field has a prefix.

This bug still exists in the latest version

there is an existing issue which is closed:
#13769

What is the expected behavior?
The Form-Field-Outline-Label-Gap should be positioned correctly with or without a prefix. Inside a dialog.

What is the current behavior?
The Form-Field-Outline-Label-Gap does not reposition itself away from the form field prefix like the label does when it is opened in a dialog.

What are the steps to reproduce?

I edited the stackblitz
https://stackblitz.com/edit/form-field-outline-label-gap-position-error-in-dialog

Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.2.3
Angular Material 7.0.3
chrome: 71

[kklimczak]

I noticed the same problem:

The problem occurs when I refresh page.

only Windows 8.1 (on the same version of Chrome in Ubuntu 18.04 don't occurs)
Chrome 72.0.3626.119

[danbord]

Same problem here

[lucasferreiralsf]

Same problem:

[gazsiadam]

I encountered the same issue. It can be reproduced with the Dialog example form the official Angular Material website.
Steps to reproduce

1. Add appearance="outline" to "the mat-form-field" element
2. Add <mat-icon matPrefix class="icon-prefix-padding">person</mat-icon> inside the "mat-form-field" element

If lazy, use this stackblitz :)

[jelbourn]

@mmalerba is this addressed by one of the open form-field PRs?

[mmalerba]

I don't think so, there's an open one for a similar issue with RTL (#15415), but I don't think its related to this one

[ivibe]

When using embedded view from a prepared TemplateRef, the same issue appears

<ng-template #prefixRef>
  <button mat-icon-button *ngIf="switch">
    <mat-icon>check</mat-icon>
  </button>
  <mat-icon *ngIf="!switch">check</mat-icon>
</ng-template>

<p>
  <mat-form-field appearance="outline" floatLabel="always">
    <mat-label>Outline form field</mat-label>
    <ng-container matPrefix [ngTemplateOutlet]="prefixRef"></ng-container>
    <input matInput placeholder="Placeholder" />
    <mat-icon matSuffix>
      {{ switch ? 'sentiment_very_dissatisfied' : 'sentiment_satisfied' }}
    </mat-icon>
    <mat-hint>Weird behavior</mat-hint>
  </mat-form-field>
</p>

Example on stackblitz.com

[donmccurdy]

Seeing what I think may be the same issue here. The outline is initially correct, but when mobile device orientation is changed (e.g. landscape -> portrait), changing the width of the input, the outline will overlap the label text.

[raw3]

Setting a fixed width globally on .mat-form-field-prefix is a temporary fix we are rolling with at the moment. The issue was visible when using a custom element with matPrefix even without a dialog in our case. Very situational, but figured I'd share.