how do you change the width and heigth for popover in material ?

Question

I am trying to modify the width and height on popover material ui but nothing ? please help thanks

                                      open={open}
                                      anchorEl={anchorEl}
                                      className={{
                                            height: '300px',
                                            width: '250px'
                                      }}
                                      anchorOrigin={{
                                        vertical: 'top',
                                        horizontal:'left',
                                      }}
                                      transformOrigin={{
                                        vertical: 'top',
                                        horizontal: 'right',
                                      }}
                                      disableRestoreFocus
                                    >

Cooler

FAQ on how to question on stackoverflow – Nablus

Answer 1

Use the PaperProps property of Popover:

      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        value={value}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        PaperProps={{
          style: { width: '100%' },
        }}

Gudgeon

Answer 2

The easiest way of doing that is to stretch the content inside the Popover, because it's width is calculated automatically.

<Popover>
  <div 
    style={{ 
      width: '300px', 
      height: '200px'
    }}
  >
    Some inside content
  </div>
</Popover>

And that will stretch Popover itself to desired size.

Automotive

Answer 3

You can do it by changing slotProps in MUi. Here you can see an example below:

<Popover
  {...otherProps}
  slotProps={{
    paper: {
      sx(theme) {
        return {
          [theme.breakpoints.down("sm")]: {
            width: "100%",
            height: "150px",
          },
        };
      },
    },
  }}
>
  <Typography>Awesome popover of mui</Typography>
</Popover>

Eggnog

Answer 4

In your code you have the className equal to css, this will not work. You can either change the className to style, and it should work or you're going to have to add a const variable and hook it into the withStyle HOC. Then add the height and width to that const, and then call the class you made in that to the className.

All these examples are on the material-ui site. https://material-ui-next.com/getting-started/faq/ I've found extremely helpful.

Wingard

Answer 5

Try to change style of this class name on your css file .MuiPaper-elevation8 like :

.MuiPaper-elevation8{
width: 300px;
height: 150px;
}

Dodecahedron