Nested Menu Item in React

Question

I have a problem in displaying the values from the TextField in my React app. I'm using material UI and material-ui-phone-number as its packages. As you can see, the values after i click the flag, it is displaying on the back. I believe this is on the zIndex. Pls modify only the dialog2.js

Pls check my codesandbox here CLICK HERE

score 0 · Answer 1 · answered Oct 26 '20 at 10:30

0

This can be achieved by doing the following changes:

Remove all CSS z-index defined
Put the Dialog 2 in Dialog 1 content

Here is the working CSB Link: https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js

answered Oct 26 '20 at 10:30

Yash Joshi

2,586
1
9
18

Thank you for this. But I'm sorry i forgot to tell that you should only modify on the `dialog2.js`. Other zIndex is fixed. Thank you – Joseph Oct 26 '20 at 10:40
Hey I dont think this would be a really great solution as Dialog box itself define its own z-index and you are just overriding the default value, if you manage to solve this issue with z-index in near future it would cause a conflict if material-ui changes z-index or with a different element – Yash Joshi Oct 26 '20 at 10:56

score 0 · Accepted Answer · answered Oct 26 '20 at 10:45

0

Your MuiPhoneNumber utilizes a MUI modal for the country selection & its default z-index is 1300. It does not look like they expose a prop to alter its css properties so you can just target #country-menu (the id of the modal) using any preferred styling solutions

<div>
  <style type="text/css">
    {`
    #country-menu {
      z-index: 1801;
    }
    `}
  </style>
  <DialogContent style={{ width: 300, height: 500 }}>
    <MuiPhoneNumber
      name="MobileNo"
      label="Mobile No."
      variant="outlined"
      fullWidth
      defaultCountry={"vn"}
      value={selectedValue}
      onChange={(e) => setSelectedValue(e)}
    />
  </DialogContent>
</div>

answered Oct 26 '20 at 10:45

95faf8e76605e973

13,643
3
24
51

Thanks for this! However in my app, it is still not overriding? Is there other way to do this? – Joseph Oct 26 '20 at 11:01
Yes, (1) try ctrl+f5 to hard refresh the web page, (2) check the styles on dev tools for any other style that may be taking precedence - at that point just increase your CSS specificity if there are (e.g., `body #country-menu`) – 95faf8e76605e973 Oct 26 '20 at 11:05

Nested Menu Item in React

2 Answers2