Z-Index on Popper menu?

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


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!


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


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

Tags:

Material Ui

Recent Posts