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

[Menus] - z-index/layering/document placement #1621

Closed
chrismcv opened this issue Sep 10, 2015 · 3 comments
Closed

[Menus] - z-index/layering/document placement #1621

chrismcv opened this issue Sep 10, 2015 · 3 comments
Labels
component: menu This is the name of the generic UI component, not the React module!

Comments

@chrismcv
Copy link
Contributor

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
windows

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)

screenshot from 2015-09-10 22 35 41

The solution is to move it outside the main DOM tree.

<body>
  <div id="app">
     <div>// select field stuff</div>
   </div>
  <div style="postition:fixed, left:454, top:234 etc">// menu body</div>
</body>

Doing so introduces the following issues:

  1. Scrolling and resizing need listened to, so that the menu can keep it's position
  2. Something like react-layer-mixin would be needed to place the menu outside the main tree.
  3. Placing it outside the tree messes up context, which breaks themes. react-bootstrap seems to have solved with with OverlayMixin.js

Does 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?
@chrismcv chrismcv changed the title [Menus [Menus] - z-index/layering/document placement Sep 10, 2015
@chrismcv chrismcv reopened this Sep 10, 2015
@sammy-tam
Copy link

+1

@chrismcv chrismcv mentioned this issue Sep 18, 2015
Closed
@chrismcv
Copy link
Contributor Author

chrismcv commented Oct 9, 2015

#1845 should resolve

@alitaheri
Copy link
Member

@chrismcv You fixed it yourself 👍 🎉 👍

@chrismcv chrismcv mentioned this issue Apr 4, 2016
Closed
mnajdova pushed a commit to mnajdova/material-ui that referenced this issue Nov 10, 2020
@dmtrKovalenko @dependabot-preview
Bump formik from 1.5.8 to 2.1.4 (mui#1621)
2b84bd6 
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] <[email protected]>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
@zannager zannager added the component: menu This is the name of the generic UI component, not the React module! label Dec 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: menu This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@chrismcv @sammy-tam @alitaheri @zannager