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(autocomplete, select): should leave extra space when positioned above outlined form-field #27476

Open
1 task
mmalerba opened this issue Jul 18, 2023 · 0 comments · May be fixed by #27714
Open
1 task

bug(autocomplete, select): should leave extra space when positioned above outlined form-field #27476

mmalerba opened this issue Jul 18, 2023 · 0 comments · May be fixed by #27714
Labels
area: material/autocomplete area: material/form-field area: material/select P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@mmalerba
Copy link
Contributor

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When the autocomplete or select is positioned above an outlined form-field (due to insufficient space on the bottom), it overlaps the label. Ideally we would add some additional space when positioning above so that the label is still legible.

Reproduction

StackBlitz link: https://stackblitz.com/edit/6pam3o
Steps to reproduce:

  1. Click inside form-field
  2. Observe that autocomplete overlaps the label

Expected Behavior

Label should be legible while select/autocomplete is open

Actual Behavior

select/autocomplete obscures label

Environment

  • Angular: 16
  • CDK/Material: 16
  • Browser(s): All
  • Operating System (e.g. Windows, macOS, Ubuntu): All
@mmalerba mmalerba added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/autocomplete area: material/form-field area: material/select labels Jul 18, 2023
kharazian added a commit to kharazian/components that referenced this issue Aug 26, 2023
@kharazian
fix(material/autocomplete): Prevent Autocomplete overlap with outline…
c585fdd 
…d form-field label when overlay is positioned above

Fixed by preventing Autocomplete overlap with outlined form-field label when overlay is positioned above. Implemented a function to calculate the necessary vertical offset for outlined appearance, ensuring label legibility.

Fix angular#27476
@kharazian kharazian linked a pull request Aug 26, 2023 that will close this issue
Open
kharazian added a commit to kharazian/components that referenced this issue Aug 27, 2023
@kharazian
Fix(material/autocomplete): Enhanced offset determination by consider…
81b5bef 
…ing parent form field and appearance.

Fix angular#27476
kharazian added a commit to kharazian/components that referenced this issue Aug 31, 2023
@kharazian
fix(material/autocomplete): Optimized performance by first checking i…
c6f883c 
…f the form field has an outline appearance.

Fix angular#27476
kharazian added a commit to kharazian/components that referenced this issue Sep 27, 2023
@kharazian
fix(material/autocomplete): prevent autocomplete overlap with outline…
dab1be2 
…d label when overlay above

Fixes by preventing Autocomplete overlap with outlined form-field label when overlay is positioned
above. Implemente a function to calculate the necessary vertical offset for outlined appearance,
ensuring label legibility.

Fixes angular#27476
kharazian added a commit to kharazian/components that referenced this issue Sep 27, 2023
@kharazian
fix(material/autocomplete): enhanced offset determination by consider…
7bc6788 
…ing parent form field

Fixes angular#27476
kharazian added a commit to kharazian/components that referenced this issue Sep 27, 2023
@kharazian
fix(material/autocomplete): optimized performance by first checking t…
8f1b1b3 
…he outline appearance

Fixes angular#27476
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/autocomplete area: material/form-field area: material/select P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
1 participant
@mmalerba