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.

[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...

[ghost]

The baseline of all the text gets misaligned when using outline and prefixes, as well.

[avinashkgit]

Here is the screenshot on iPhone safari browser. Its misaligned on iPhone chrome as well.

It is working fine on web safari and chrome. Working fine on android chrome.
The alignment with prefix is incorrect.

[lundmikkel]

@avinashkgit That seems to a completely different issue, not related to this one.

[shadowzeng]

I have met the same issue, solved by using NoopAnimationsModule.

[guchhaitprasun]

Hi Team do we have any fix for this issue, Same issue persist with Angular Material 11.2.1. I tried NoopAnimationModule as suggested by shadowzeng and I have also tried the solution provied by shubhamseth29 without any luck.

P.S. settimeout don't seens to be a valiid solution.

Dependencies
Angular v.11.2.1
Angular Material v11.2.1
Node v14.17.1
NPM v6.14.13

Dev Env.
Browser: Chrome v91.0.4472.124
OS: Windoews 10 Pro v20H2

[BaptisteMPro]

NoopAnimationsModule

This solves my issue. Thank you.
If you don't want the placeholder/label animation and use outline rendering in your mat-form-field.

First, set floatLabel to always :

{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } },

Then, import NoopAnimationsModule after BrowserAnimationsModule in your app module.

This label was misaligned and it's fix now

[BaptisteMPro]

The problem with my "solution", is that <mat-spinner> does not work anymore, which sucks...

[austenstone]

Confirmed simply importing NoopAnimationsModule fixes the issue. I didn't even change the MAT_FORM_FIELD_DEFAULT_OPTIONS.
#15027 (comment)

[krem06]

Hi,

I added a small piece of css and it seems to do the trick:

.mat-form-field-label { z-index: 1000; background-color: #ffffff; width: auto !important; padding: 0 10px; }

[MikeJerred]

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

This is the workaround I am using, note if you don't have a dialog component (e.g. you are just using a template) you can also do:

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

const dialogRef = this.dialog.open(templateRef);
dialogRef.afterOpened().subscribe(() => {
  this.formFields.forEach(formField => {
    formField.updateOutlineGap();
  });
});

[poveu]

There are two workarounds for a custom font case:

First workaround:

• create a directive that links to all mat-form-field components (directives) with appearance attribute set to outline
• listen to document.fonts.ready event and run updateOutlineGap on the MatFormField
• export the directive in AppModule or SharedModule to make it accessible everywhere
• this way Angular will update the outline size as soon as the custom font is loaded

import { AfterViewInit, Directive } from '@angular/core';
import { MatFormField } from '@angular/material/form-field';

@Directive({
    selector: 'mat-form-field[appearance=outline]',
})
export class UpdateOutlineGapDirective implements AfterViewInit {
    constructor(private formField: MatFormField) {
    }

    ngAfterViewInit() {
        document.fonts.ready.then(() => {
            this.formField.updateOutlineGap();
        });
    }
}

Second workaround:

• add #userNameField to your mat-form-field element
• add (focus)="userNameField.updateOutlineGap()" to the input element
• this way every time the input is focused, Angular will update the outline size

[meblum]

Seems to be fixed in mdc. Works correctly after upgrading to v15

[mmalerba]

Confirmed that this is fixed with the latest version: https://stackblitz.com/edit/angular-vsud9k

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}