Prefixed Form-Field-Outline-Label-Gap not positioned correctly in Mat-Dialog in 7.0.1

[OlufemiOyewole]

Bug:

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

What is the expected behavior?

The Form-Field-Outline-Label-Gap should be positioned correctly with or without a prefix.

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?

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

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

(not applicable)

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

Angular 7.0.0
Angular Material 7.0.1
Chrome 69, Safari 12.0

Is there anything else we should know?

This seems related to #12782

[aeslinger0]

I don't think mat-dialog has anything to do with it. You can reproduce it by taking the demo and just changing the form fields to use appearance="outline"

[OlufemiOyewole]

@aeslinger0 , I am referring to the gap in the field outline that is for the mat-label when it is raised.

I believe that you are referring to the prefix/suffix not being aligned to the input characters.
For that, I found this issue #11831 that already addresses it.

[aeslinger0]

Yes, you're right. My mistake.

[josephperrott]

Closing as duplicate of #11831

[OlufemiOyewole]

@josephperrott , this is not a duplicate of 11831.

11831 is about vertical alignment of characters inside the field.
This is about the horizontal repositioning of the outline gap not taking effect in a one off scenario.

Please take a second look at the issue and consider reopening it.

[hanyu-natsu]

This issue is still there in 7.2.0

To be clear, this happens when ouline gap is calculated before the label and container rendering being stable. I tried pausing the "updateOutlineGap" function when open the dialog and release it after all components are rendered, then the gap is correct.

Please reopen this issue.

[mohsini172]

It's still an issue on 7.3.1.

[njsent]

This occurs in any scenario using matPrefix - not just mat-dialog (v7.3.7)

<mat-form-field appearance="outline" fxFlex> <mat-label>User Name</mat-label> <mat-icon matPrefix>account_box</mat-icon> <input matInput formControlName="userName" maxlength="50" required> <mat-error>User Name is required</mat-error> </mat-form-field>

[rodmax]

I have the same issue

@josephperrott could you please consider above comments

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