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

Set placement of select dropdown #3656

Merged
merged 2 commits into from
Jan 17, 2023
Merged

Set placement of select dropdown #3656

merged 2 commits into from
Jan 17, 2023

Conversation

Pytal
Copy link
Contributor

@Pytal Pytal commented Jan 14, 2023 •
edited
Loading

Allow setting the placement of the dropdown to open above the input in addition to the default of opening below

image

This also updates the dropdown position automatically to keep the element within the viewport when e.g. scrolling

Before After
image image

@Pytal Pytal added the 2. developing Work in progress label Jan 14, 2023
@Pytal Pytal self-assigned this Jan 14, 2023
@Pytal Pytal mentioned this pull request Jan 14, 2023
Closed
12 tasks
@Pytal Pytal force-pushed the enh/a11y-select-dropdown-placement branch from 85db8b6 to a4cf11e Compare January 17, 2023 02:14
@Pytal Pytal changed the title [WIP] Add dynamic select dropdown placement Set placement of select dropdown Jan 17, 2023
@Pytal Pytal marked this pull request as ready for review January 17, 2023 02:24
@Pytal Pytal added enhancement New feature or request 3. to review Waiting for reviews feature: select Related to the NcSelect* components accessibility Making sure we design for the widest range of people possible, including those who have disabilities and removed 2. developing Work in progress labels Jan 17, 2023
@Pytal Pytal added this to the 7.5.0 milestone Jan 17, 2023
@Pytal
Add @floating-ui/dom dependency
88b45ee 
Signed-off-by: Christopher Ng <[email protected]>
@Pytal
Set placement of select dropdown
f50ed60 
- Update position automatically to keep dropdown within the viewport

Signed-off-by: Christopher Ng <[email protected]>
@Pytal Pytal force-pushed the enh/a11y-select-dropdown-placement branch from a4cf11e to f50ed60 Compare January 17, 2023 18:42
@Pytal
Copy link
Contributor Author

Pytal commented Jan 17, 2023

Minor updates + example for the styleguide!

@Pytal Pytal added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Jan 17, 2023
@Pytal Pytal merged commit dc1be2b into master Jan 17, 2023
@Pytal Pytal deleted the enh/a11y-select-dropdown-placement branch January 17, 2023 18:56
@skjnldsv skjnldsv mentioned this pull request Jan 18, 2023
Merged
@ShGKme ShGKme mentioned this pull request Jan 28, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marcoambrosini marcoambrosini marcoambrosini approved these changes

@artonge artonge artonge approved these changes

@JuliaKirschenheuter JuliaKirschenheuter JuliaKirschenheuter approved these changes

@raimund-schluessler raimund-schluessler Awaiting requested review from raimund-schluessler

Assignees

@Pytal Pytal

Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility Making sure we design for the widest range of people possible, including those who have disabilities enhancement New feature or request feature: select Related to the NcSelect* components
Projects
None yet
Milestone
7.5.0
Development

Successfully merging this pull request may close these issues.
4 participants
@Pytal @JuliaKirschenheuter @artonge @marcoambrosini