[Popper] Missing z-index with Dialog
See original GitHub issueI have the following issue:
When I embed a Popper component in a Dialog which also contains the anchor component, the popper is rendered behind the dialog.
I created a modified version of one of examples in the popper docs to demonstrate this: https://codesandbox.io/s/8k7n9o3y69?module=%2Fdemo.js
There’s a workaround to this, but I think it’s ugly and the popper component should really be able to handle this on its own:
You can apply zIndex: 1400
as a style, which will force the popper to be rendered over the 1300
index of the dialog.
Issue Analytics
- State:
- Created 5 years ago
- Comments:10 (5 by maintainers)
Top Results From Across the Web
[Popper] Missing z-index with Dialog #14216 - mui/material-ui
I have the following issue: When I embed a Popper component in a Dialog which also contains the anchor component, the popper is...
Read more >Z-Index on Popper menu? - Stack Overflow
Using the React Portal API, the Material-UI Popper component renders by default outside the DOM hierarchy of the parent tree, this explains ...
Read more >Popper API - Material UI - MUI
Name Type Default
open * bool false
anchorEl HTML element | object | func
children node | func
Read more >jQuery UI Dialog - missing close icon [#3227133] | Drupal.org
Another fix was to adjust the loading weight in your subtheme so that Bootstrap is loaded before jquery.ui. global-styling: version: VERSION ...
Read more >Popper | Mantine
Popper is a utility component used under the hood in Menu, Progress, Tooltip and other Mantine components. You can use it to create...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The Popper component doesn’t have any style. You should be able to apply a z-index from the theme.
@robcostello1 Thanks for sharing. Have you considered using the React context instead?