-
Notifications
You must be signed in to change notification settings - Fork 14
Dropdown can not work well inside a container 'overflow' #211
Comments
Alloy UI drop downs used to attach the menu directly on the body and using a z-index stack manager to (try to) ensure its visibility. In metal and ICD there's no concept of portals AFAIK (see React docs about them) and it could prove a little difficult to extract the menu in a different part of the dom. |
Also, boostrap-style drop downs (those that just show/hide in place) are terribly easier to implement a11y-wise. If we go back to portal-style menus we'd also need to obscure the page until the menu is closed. |
Hey @matuzalemsteles where do we have the |
|
http://pat270.github.io/lexicon/content/tables/ There it's being used |
This has been a long standing issue with dropdowns in responsive tables (since BS3). The best way to avoid these kind of overflow issues is not to have dropdowns in tables. You will be able to see the overflow issue on the site if you reduce the table rows to 1 or add more items to make the dropdown really big. Since removing dropdowns from tables doesn't seem like an option this needs to be handled by whatever dropdown plugin we are using. |
Yup, this is a known issue for dropdowns, and indeed needs to be handled by the dropdown plugin, which, as @yuchi points out, might be tricky in a metal environment :( |
This is probably a good time to include portals in metal — iff ICD permits. I’ve been a huge of fan of them in my react projects. See docs → |
Thanks @yuchi, that's a great suggestion, we'll take a look! /cc @Robert-Frampton! |
Support for Portals has been implemented and released in Metal.js@2.16.0. There's a guide about Portals in the site that should be a good starting point to implement this, although I think @Robert-Frampton was already working on it for this... |
Suggestion: have a look at how Short overview:
|
The current Dropdown that we have it identifies only the size of the screen to know which position will position itself. In more complex environments such as table, your element uses
overflow-y:hidden
it can not identify that your view will be overridden. This becomes a problem in order to use it.The text was updated successfully, but these errors were encountered: