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

Improve select popups #263

Open
rubenthoms opened this issue Sep 20, 2022 · 1 comment
Open

Improve select popups #263

rubenthoms opened this issue Sep 20, 2022 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@rubenthoms
Copy link
Collaborator

rubenthoms commented Sep 20, 2022

When select elements are located at the end of a page / scrollable container, their popups are cut off. Either refactor the select component or find a different solution to this issue.

image

The idea is to stick to how the native select component works. Here are some screenshots of how it works including an evalutation if the behaviour can be recreated for custom popups using JavaScript.

  1. select at end of scrollable container with enough space below - popup displays at top level, independent of scroll area:
    image
  • Can be recreated by appending the popup to body.
  1. select at end of browser window - popup displays outside of browser window:
    image
  • Impossible to recreate this behaviour
  • Possible workaround: display popup above custom select component
  1. select at end of browser window while the latter is in full screen mode - popup displays above select component:
    image
  • Recreatable with same approach as in 2.
@rubenthoms rubenthoms added the bug Something isn't working label Sep 20, 2022
@rubenthoms rubenthoms self-assigned this Sep 22, 2022
@rubenthoms
Copy link
Collaborator Author

Related to plotly/dash#2242.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: Backlog 📝
Development

No branches or pull requests

1 participant