Components: 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:
https://github.com/angular/material2/issues/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 (https://github.com/angular/components/pull/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.

[lsrsilva]

Any update about this?

[shubhamseth29]

Add reference to your mat field like #outlineFieldRef in mat-form-field tag

Then call this function based on your use case -> updateOutlineGap()
Example:
add focus in input field and call
(focus)="outlineFieldRef.updateOutlineGap()"

[farah111]

any updates on this issue?
I have the same problem,
added a mat-icon in matPrefix for a mat-form-field with appearance="outline"
everytime the label floats, it's pushed out of it's container. check screenshot
I googled every possible solution, but i got nothing :(

[gtranter]

@farah111 @abannsunny you can work around the problem using the fix provided by @shubhamseth29 above. Add the following to the DialogComponent in the stackblitz:

  @ViewChildren(MatFormField) formFields: QueryList<MatFormField>;

  ngAfterViewInit(): void {
    setTimeout(() => this.formFields.forEach(ff => ff.updateOutlineGap()), 100);
  }

[marlinverhulst]

We have seen the same issue, are there any updates on when it would be fixed ?

Angular version: 10.1.0
Angular Material: 10.2.7

[Jackques]

@marlinverhulst facing the same issue here, and on the same versions.
Anyone knows if this will be fixed in a future update of Angular Material theme?

[psenechal]

Same issue here using just a standard mat-input inside a mat-form-field...no prefix or suffix and the label aligns all the way to the left while the opening for it in the outline is near the center of the input. No styling applied at all...this is just out-of-the-box functionality. Definitely shouldn't have to rely on running something in a settimeout method to fix an issue. The material.angular.io website is displaying it correctly...not sure how they're doing that.

[joedoublev98]

Same issue here, just the default mat select. Please respond with a better solution than a timeout fix...