Set a max width and height to MUI Popper

Question

I have been playing around with the popper API from MUI and have noticed it spills out of my main div. Can anyone suggest the best manner to stop this?

I would like the popper to be larger in height. Please see below:

const DescriptionEditor = (props) => {
   const [anchorEl, setAnchorEl] = React.useState(null);
    const [open, setOpen] = React.useState(false);
    const [placement, setPlacement] = React.useState();
  
    const handleClick = (newPlacement) => (event) => {
      setAnchorEl(event.currentTarget);
      setOpen((prev) => placement !== newPlacement || !prev);
      setPlacement(newPlacement);
    };

<Box sx={{ width: 200 }}>
                <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
                  {({ TransitionProps }) => (
                    <Fade {...TransitionProps} timeout={350}>
                      <Paper>
                        <Typography variant="subtitle3">WWF values diversity and is building a workforce that reflects the community we serve.</Typography>
                      </Paper>
                    </Fade>
                  )}
                </Popper>

                <Grid container justifyContent="center">
                    <Button onClick={handleClick('bottom')} variant="subtitle2" color="primary">Corporate Profile</Button>
                </Grid>
              </Box>


}

If anybody knew a good method to restrict this, potentially to the parent div it's within through a maxWidth function or a 100% prop please let me know!!

Answer 1

To be able to set the popper width relative to your main div yo have to use the "disablePortal" prop. It makes the popper to be under the DOM hierarchy of the parent element, otherwise MUI creates the popper at the first level of the body.

You will also have to add the position: 'relative' to the main div and set the popper width to '100%'.

    const [anchorEl, setAnchorEl] = React.useState(null);
    const [open, setOpen] = React.useState(false);
    const [placement, setPlacement] = React.useState();
  
    const handleClick = (newPlacement) => (event) => {
      setAnchorEl(event.currentTarget);
      setOpen((prev) => placement !== newPlacement || !prev);
      setPlacement(newPlacement);
    };

  return (
      <Box sx={{ width: 200, position: 'relative' }}>
        <Popper open={open} anchorEl={anchorEl} disablePortal placement={placement} transition>
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Paper sx={{ width:  '100%'}}>
                <Typography variant="subtitle3">WWF values diversity and is building a workforce that reflects the community we serve.</Typography>
              </Paper>
            </Fade>
          )}
        </Popper>
        <Grid container justifyContent="center">
            <Button onClick={handleClick('bottom')} variant="subtitle2" color="primary">Corporate Profile</Button>
        </Grid>
      </Box>
  );