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(MatFormField):MatFormField suffix and prefix are NOT aligned with floating placeholder - even on DEMO PAGE #21846

Open
Antoniossss opened this issue Feb 9, 2021 · 2 comments
Open

bug(MatFormField):MatFormField suffix and prefix are NOT aligned with floating placeholder - even on DEMO PAGE #21846

Antoniossss opened this issue Feb 9, 2021 · 2 comments
Assignees
@annieyw
Labels
area: material/form-field P4 A relatively minor issue that is not relevant to core functions

Comments

@Antoniossss
Copy link

Reproduction

got to https://material.angular.io/components/form-field/overview#prefix--suffix

Prefix and suffix of second example is not aligned with floating placeholder (when it is not floating)

Expected Behavior

Everything to be alligned

Actual Behavior

image

Environment

Angular demo page for 11.1.1
@Antoniossss Antoniossss added the needs triage This issue needs to be triaged by the team label Feb 9, 2021
@crisbeto
Copy link
Member

I think that in general the new form field appearances aren't really made for text-based prefixes. We should either remove those examples or switch them to icons.

@crisbeto crisbeto added area: material/form-field docs This issue is related to documentation P4 A relatively minor issue that is not relevant to core functions and removed needs triage This issue needs to be triaged by the team labels Feb 15, 2021
mcalmus added a commit to mcalmus/material2 that referenced this issue Mar 30, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
48a14b4 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Mar 30, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
5b81ac6 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 6, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
2e3d147 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 10, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
754a559 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 10, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
1e550b8 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 10, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
e1f1585 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 25, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
c557214 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 25, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
67a3e81 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 25, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
c7d5b27 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 26, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
be0be7b 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 26, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
e4faf43 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 27, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
df28ffc 
…ngular#21846)
mcalmus added a commit to mcalmus/material2 that referenced this issue Apr 27, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (a…
4a73f2c 
…ngular#21846)
annieyw pushed a commit that referenced this issue May 3, 2021
@mcalmus
fix(material/datepicker): Only update selection when value changed (#…
979a4fa 
…21846) (#22369)
annieyw pushed a commit that referenced this issue May 3, 2021
@mcalmus @annieyw
fix(material/datepicker): Only update selection when value changed (#…
6fe273c 
…21846) (#22369)

(cherry picked from commit 979a4fa)
annieyw pushed a commit that referenced this issue May 3, 2021
@mcalmus @annieyw
fix(material/datepicker): Only update selection when value changed (#…
35c0483 
…21846) (#22369)

(cherry picked from commit 979a4fa)
@annieyw annieyw self-assigned this May 24, 2021
@annieyw annieyw mentioned this issue May 24, 2021
Merged
@mmalerba mmalerba removed the docs This issue is related to documentation label May 25, 2021
@mmalerba
Copy link
Contributor

Thanks @annieyw for fixing the example! I'm leaving this bug open because we should be able to do more to improve this experience in the MDC version of the form-field. In that version we actually differentiate between text and icon prefix/suffixes so we can treat them differently. I think the right thing to do for the MDC version is hide the text prefix/suffix when the label is not floating (this is what MDC does in their own demos)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@annieyw annieyw

Labels
area: material/form-field P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@crisbeto @Antoniossss @mmalerba @annieyw