title: Element positioned absolute inside Dialog Material UI React
body: <p>I have Dialog component where I have a button(bottom right corner) which shows another div with an item list. The problem I'm facing is that the list is being rendered inside the Dialog component and it's being cropped. I set the <code>position: absolute</code>, <code>z-index</code> and  set the <code>position: relative</code> to the parent but it does not work. Here is how it looks like. Any helpful tips I would appreciate it. 
  1) Before I click the button to show the list
  <a href="https://i.stack.imgur.com/t9FXk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t9FXk.png" alt="enter image description here"></a>
  2) After I click the button. Highlighted css properties for the list element
  <a href="https://i.stack.imgur.com/NA9vQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NA9vQ.png" alt="enter image description here"></a></p>
  
  <p>And the code for Dialog component :</p>
  
  <pre><code>import React, { useState } from "react";
  import { makeStyles } from "@material-ui/core";
  import Button from "@material-ui/core/Button";
  import Dialog from "@material-ui/core/Dialog";
  import DialogContent from "@material-ui/core/DialogContent";
  import DialogContentText from "@material-ui/core/DialogContentText";
  import DialogTitle from "@material-ui/core/DialogTitle";
  import IconButton from "@material-ui/core/IconButton";
  import CloseIcon from "@material-ui/icons/Close";
  import Typography from "@material-ui/core/Typography";
  import OutlinedInput from "@material-ui/core/OutlinedInput";
  import { ProjectTreeWindow } from "../index";
  
  const useStyles = makeStyles(theme =&gt; ({
    addTaskButton: {
      marginTop: 10
    },
    dialog: {
      width: "40%",
      maxHeight: 435
    },
    closeButton: {
      position: "absolute",
      right: theme.spacing(1),
      top: theme.spacing(1),
      color: theme.palette.grey[500]
    },
    controlsWrapper: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between"
    }
  }));
  
  const AddQuickTaskDialog = props =&gt; {
    const classes = useStyles(props);
    const { open, close } = props;
    const [quickTaskDescription, setQuickTaskDescription] = useState("");
    const [textInputRef, setTextInputRef] = useState(null);
    const handleChangeQuickTaskDescription = event =&gt; {
      setQuickTaskDescription(event.target.value);
    };
  
    const handleAddQuickTaskSubmit = () =&gt; {
      alert("Quick task submitted");
      close(textInputRef);
    };
  
    return (
      &lt;Dialog
        data-testid="add-task-quick"
        classes={{
          paper: classes.dialog
        }}
        maxWidth="lg"
        open={open}
        keepMounted
        onClose={() =&gt; {
          close(textInputRef);
        }}
        aria-labelledby="quick-task-dialog"
        aria-describedby="quick-task-dialog-description"
      &gt;
        &lt;DialogTitle id="quick-task-dialog-title"&gt;
          &lt;Typography variant="h6"&gt;Quick Add Task&lt;/Typography&gt;
          {close ? (
            &lt;IconButton
              aria-label="close"
              className={classes.closeButton}
              onClick={() =&gt; {
                close(textInputRef);
              }}
            &gt;
              &lt;CloseIcon /&gt;
            &lt;/IconButton&gt;
          ) : null}
        &lt;/DialogTitle&gt;
        &lt;DialogContent&gt;
          &lt;div className={classes.wrapper}&gt;
            &lt;OutlinedInput
              onChange={handleChangeQuickTaskDescription}
              inputRef={input =&gt; {
                setTextInputRef(input);
                return input &amp;&amp; input.focus();
              }}
              fullWidth
              //   className={showAddTaskInput ? classes.show : classes.hide}
              placeholder="e.g. Take the dog out for a walk"
              inputProps={{ "aria-label": "add task" }}
            /&gt;
            &lt;div className={classes.controlsWrapper}&gt;
              &lt;Button
                className={classes.addTaskButton}
                disabled={quickTaskDescription.length === 0}
                data-testId="quick-add-task-submit"
                // onClick={handleAddTaskSubmit}
                color="primary"
                onClick={handleAddQuickTaskSubmit}
              &gt;
                Add Task
              &lt;/Button&gt;
              &lt;ProjectTreeWindow /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/DialogContent&gt;
      &lt;/Dialog&gt;
    );
  };
  export default AddQuickTaskDialog;
  </code></pre>
  
  <p>and for the List component:</p>
  
  <pre><code>import React, { useState } from "react";
  import { makeStyles } from "@material-ui/core";
  import ListAltTwoToneIcon from "@material-ui/icons/ListAltTwoTone";
  import IconButton from "@material-ui/core/IconButton";
  import { CustomizedToolTip } from "../index";
  import OutlinedInput from "@material-ui/core/OutlinedInput";
  import DoneTwoToneIcon from "@material-ui/icons/DoneTwoTone";
  import List from "@material-ui/core/List";
  import ListItem from "@material-ui/core/ListItem";
  import ListItemIcon from "@material-ui/core/ListItemIcon";
  import ListItemText from "@material-ui/core/ListItemText";
  import FiberManualRecordTwoToneIcon from "@material-ui/icons/FiberManualRecordTwoTone";
  import { useProjectsValue, useSelectedProjectValue } from "../../context";
  
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      position: "absolute",
      zIndex: 9999,
      top: 200,
      left: 0,
      display: "flex",
      flexDirection: "column",
      "&amp;:hover $child": {
        visibility: "visible"
      }
    },
    wrapper: {
      position: "relative !important"
    },
    selected: {
      "&amp; $child": {
        visibility: "visible !important"
      }
    },
    hidden: {
      visibility: "hidden"
    },
    listItemIcon: {
      minWidth: 30
    }
  }));
  
  const ProjectTreeWindowList = props =&gt; {
    const [textInputRef, setTextInputRef] = useState(null);
    const [typeProject, setTypedProject] = useState("");
    const classes = useStyles(props);
    const { projects } = useProjectsValue();
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;OutlinedInput
          // onChange={handleChangeQuickTaskDescription}
          inputRef={input =&gt; {
            setTextInputRef(input);
            return input &amp;&amp; input.focus();
          }}
          placeholder="Type a project"
          inputProps={{ "aria-label": "select project" }}
        /&gt;
        &lt;List&gt;
          {projects &amp;&amp;
            projects.map((project, index) =&gt; (
              &lt;ListItem
                onClick={() =&gt; {
                  alert("move selected project to input");
                }}
                //   selected={active === project.projectId}
                button
                // classes={{
                //   root: classes.root,
                //   selected: classes.selected
                // }}
              &gt;
                &lt;ListItemIcon
                  className={classes.listItemIcon}
                  style={{ color: project.color }}
                &gt;
                  &lt;FiberManualRecordTwoToneIcon /&gt;
                &lt;/ListItemIcon&gt;
                &lt;ListItemText primary={project.name} /&gt;
                &lt;ListItemIcon
                  className={`${classes.listItemIcon} ${classes.hidden}`}
                &gt;
                  &lt;DoneTwoToneIcon /&gt;
                &lt;/ListItemIcon&gt;
              &lt;/ListItem&gt;
            ))}
        &lt;/List&gt;
      &lt;/div&gt;
    );
  };
  
  const ProjectTreeWindow = props =&gt; {
    const classes = useStyles(props);
    const [showProjectTreeWindow, setShowProjectTreeWindow] = useState(false);
  
    const handleShowProjectWindow = () =&gt; {
      setShowProjectTreeWindow(!showProjectTreeWindow);
    };
    const handleCloseProjectWindow = () =&gt; {
      setShowProjectTreeWindow(false);
    };
  
    return (
      &lt;div className={classes.wrapper}&gt;
        &lt;CustomizedToolTip title="Select a project"&gt;
          &lt;IconButton onClick={handleShowProjectWindow} aria-label="add-project"&gt;
            &lt;ListAltTwoToneIcon /&gt;
          &lt;/IconButton&gt;
        &lt;/CustomizedToolTip&gt;
        {showProjectTreeWindow ? &lt;ProjectTreeWindowList /&gt; : null}
      &lt;/div&gt;
    );
  };
  export default ProjectTreeWindow;
  </code></pre>