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.

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

fix(material/select): use flexible overlay dimensions #30628

Merged
merged 1 commit into from
Mar 17, 2025

Conversation

andrewseguin
Copy link
Contributor

@andrewseguin andrewseguin commented Mar 13, 2025

When the browser window is small, the select's listbox panel does not shrink in size, which causes options to become unreachable.

With flexible positioning, the overlay is constrained in height causing the panel to shrink as well, rendering all available options with scrolling

Example: Panel displayed underneath the select.

Observe that the Milk option was not fully visible when the panel is scrolled all the way down

Before:
image
After:
image

Example: Panel displayed above the select.

Observe the None option was not at all visible when scrolled up

Before:
image
After:
image

@andrewseguin andrewseguin added target: patch This PR is targeted for the next patch release dev-app preview When applied, previews of the dev-app are deployed to Firebase labels Mar 13, 2025
@andrewseguin andrewseguin requested a review from a team as a code owner March 13, 2025 17:30
@andrewseguin andrewseguin requested review from crisbeto and mmalerba and removed request for a team March 13, 2025 17:30
@andrewseguin andrewseguin force-pushed the select-height branch 2 times, most recently from 5653865 to 566b98a Compare March 13, 2025 17:35
Copy link

github-actions bot commented Mar 13, 2025

Deployed dev-app for 55a6263 to: https://ng-dev-previews-comp--pr-angular-components-30628-dev-qtqevu3l.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@andrewseguin andrewseguin added the action: merge The PR is ready for merge by the caretaker label Mar 17, 2025
@andrewseguin andrewseguin merged commit d5ba63d into angular:main Mar 17, 2025
17 of 20 checks passed
@andrewseguin
Copy link
Contributor Author

The changes were merged into the following branches: main, 19.2.x

andrewseguin added a commit that referenced this pull request Mar 17, 2025
@Segdo
Copy link

Segdo commented Mar 17, 2025

I think this also fixed #13829 and #18901.
Which also makes #29904 redundant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker area: material/select dev-app preview When applied, previews of the dev-app are deployed to Firebase target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants