Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(mat-form-field): label is not within the border gap for outline appearance #23863

Closed
sbrunecker opened this issue Oct 31, 2021 · 2 comments · Fixed by #23869
Closed

bug(mat-form-field): label is not within the border gap for outline appearance #23863

sbrunecker opened this issue Oct 31, 2021 · 2 comments · Fixed by #23869
Assignees
@crisbeto
Labels
area: material/form-field P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@sbrunecker
Copy link

Reproduction

https://stackblitz.com/edit/components-issue-jbhqbn

image

Modify the initial value of countryCode in src/app/example-component.ts to see that the gap is moving based on the initial prefix length (e.g. "" and "+12345").

image
image

Now changing the country to USA:

image

Expected Behavior

When the input is focused, the label and the gap in the outline are properly aligned in the upper left corner.

Actual Behavior

The gap is placed based on the initial prefix while the label is placed based on the current prefix so if the initial prefix length is not the same as the current prefix length, the label will appear misaligned.

Environment

  • Angular: 12.2.9
  • CDK/Material: 12.2.9
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@sbrunecker sbrunecker added the needs triage This issue needs to be triaged by the team label Oct 31, 2021
@crisbeto crisbeto self-assigned this Nov 2, 2021
@crisbeto crisbeto added area: material/form-field has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Nov 2, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 2, 2021
@crisbeto
fix(material/form-field): update outline gap when prefix changes
93a8d48 
The position of the outline gap depends on the size of the prefix, but we weren't set up to update it when that happens.

Fixes angular#23863.
@crisbeto crisbeto mentioned this issue Nov 2, 2021
Merged
@crisbeto
Copy link
Member

crisbeto commented Nov 2, 2021

I've pushed #23869 which will fix this. Until the fix is released, you can also resolve it on your end by calling updateOutlineGap on the form field when the prefix changes.

crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 2, 2021
@crisbeto
fix(material/form-field): update outline gap when prefix changes
a460856 
The position of the outline gap depends on the size of the prefix, but we weren't set up to update it when that happens.

Fixes angular#23863.
amysorto pushed a commit that referenced this issue Nov 8, 2021
@crisbeto
fix(material/form-field): update outline gap when prefix changes (#23869
a6d4141 
)

The position of the outline gap depends on the size of the prefix, but we weren't set up to update it when that happens.

Fixes #23863.
amysorto pushed a commit that referenced this issue Nov 8, 2021
@crisbeto @amysorto
fix(material/form-field): update outline gap when prefix changes (#23869
5d49df1 
)

The position of the outline gap depends on the size of the prefix, but we weren't set up to update it when that happens.

Fixes #23863.

(cherry picked from commit a6d4141)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 9, 2021
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
fix(material/form-field): update outline gap when prefix changes (ang…
4e0533f 
…ular#23869)

The position of the outline gap depends on the size of the prefix, but we weren't set up to update it when that happens.

Fixes angular#23863.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/form-field P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/form-field): update outline gap when prefix changes crisbeto/material2
2 participants
@crisbeto @sbrunecker