Z-Index on Popper menu?

I removed the disablePortal prop on the Popper component :

<Popper open={open} anchorEl={this.anchorEl} transition disablePortal>

Which now becomes

<Popper open={open} anchorEl={this.anchorEl} transition>

See the Material-UI documentation for the Popper component disablePortal prop to see why:

Disable the portal behavior. The children stay within it's parent DOM hierarchy.

By default, the Popper component uses the React Portal API : https://reactjs.org/docs/portals.html

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component

Using the React Portal API, the Material-UI Popper component renders by default outside the DOM hierarchy of the parent tree, this explains why it resolves the overlaying issue.

The modified working code is on codesandbox.io

If anyone still looking to change z-index or if you want to keep disablePortal try the methods below.

Method 1

Give an id to Popper

<Popper id='popper-1' .... />

Now in your CSS file

#popper-1 {
 z-index: 5; // or anything higher
}

Method 2

Set z-index in Popper itself using style prop

z-index working code (with disablePortal enabled) here

for me following solution worked: adding zIndex to popper.

<Popper style={{zIndex: 10000}} open={open} anchorEl={this.anchorEl} transition disablePortal>

for me removing disablePortal didn't work

As Suggested by @Ricovitch, remove disablePortal attribute from Popper element or set it's value to false <Popper open={open} anchorEl={this.anchorEl} transition disablePortal={false}>

As shown in the material-ui popper scroll playground example when disablePortal is false, the popup element is attached to body element, which is the default behavior. For example, your HTML structure will look like:

<body>
    ... existing elements ...
    <parent>
        <button onClick={openMenu}/>
    </parent>
    ... more elements ...
    ... attached popup menu for Popper ...
</body>

However, when you set disablePortal to true, it will have following html structure:

<body>
    ... existing elements ...
    <parent>
        <button onClick={openMenu}/>
        ... attached popup menu for Popper ...
    </parent>
    ... more elements ...
</body>

I hope this makes things clearer!

Z-Index on Popper menu?

Related

Recent Posts