Search code examples
reactjsdatagridmaterial-ui

Material UI DataGrid's ColumnMeun is overlapped by Dialog

A DataGrid is created within Dialog. But the column menu is overlapped by Dialog.

Please check the following demo SandBox

What I have found and try so far:

  1. Dialog will create a html tag

The z-index:1300 will cover the column menu

<div role="presentation" class="MuiDialog-root makeStyles-dialogRoot-41" style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;">

I have try to use classes={{ root: (z-index=0) }} in dialog component. But it still overwrited by 1300.

2.Clicking a column menu will create a tooltip list for selecting sorting action

<div role="tooltip" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(217px, 137px, 0px);" x-placement="bottom-end">

If I add z-index=1500 in this tag directly in browser(F12). The menu will work fine. But I have no idea how to apply the CSS to this tag.

Solution

  • You can add style={{ zIndex: 0 }} in your Dialog component.

    <Dialog
  open={open}
  onClose={handleClose}
  maxWidth="md"
  fullWidth
  style={{ zIndex: 0 }}
>

    Check the snippet