question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Popper] Missing z-index with Dialog

See original GitHub issue

I 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:closed
  • Created 5 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
oliviertassinaricommented, Sep 8, 2020

The Popper component doesn’t have any style. You should be able to apply a z-index from the theme.

zIndex: theme.zIndex.modal,
0reactions
oliviertassinaricommented, Sep 8, 2020

@robcostello1 Thanks for sharing. Have you considered using the React context instead?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found