-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
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
[Menus] - z-index/layering/document placement #1621
Labels
component: menu
This is the name of the generic UI component, not the React module!
Comments
+1 |
#1845 should resolve |
@chrismcv You fixed it yourself 👍 🎉 👍 |
mnajdova
pushed a commit
to mnajdova/material-ui
that referenced
this issue
Nov 10, 2020
Bumps [formik](https://github.com/jaredpalmer/formik) from 1.5.8 to 2.1.4. - [Release notes](https://github.com/jaredpalmer/formik/releases) - [Commits](jaredpalmer/formik@v1.5.8...v2.1.4) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
So, one of my issues with the menu system is that they get rendered inline with the component. This makes positioning relatively simple, however, this isn't consistent how operating systems work.
e.g.![osx](https://camo.githubusercontent.com/06187f7e693a44a94174c77a66e4e1384cf5b2d7b55c420ecbb32cd6e250a202/687474703a2f2f7777772e646f6f726e696b2e636f6d2f6172742f6777747374616339615f6f73782e706e67)
![windows](https://camo.githubusercontent.com/bf60db29e69a64a4b2601050d3883ef211e7e2f07e0cb6e67ecff873454cd7ea/687474703a2f2f692e737461636b2e696d6775722e636f6d2f4e4b7270462e706e67)
In both examples the menu's can sit outside their parent - while we'll be unable to go outside the browser, we currently can't always go outside the parent's container. This is paricularly relevant for dialogs etc, where
overflow-y:auto
is often applied. (We currently have issues with SelectField too near to the bottom of a Dialog)The solution is to move it outside the main DOM tree.
Doing so introduces the following issues:
react-layer-mixin
would be needed to place the menu outside the main tree.react-bootstrap
seems to have solved with with OverlayMixin.jsDoes this makes sense as an issue? Is the alternative I've suggested the only/best one? If I was to make a PR, would it be accepted?
The text was updated successfully, but these errors were encountered: