Material-ui: fixed position <Menu />

[sepehr1313]

Hello,

I want to show a <Menu /> component in the middle of the screen. Now I have the following code:

jsx <Menu id="long-menu" key="long-menu" anchorEl={props.anchorEl} open={Boolean(props.anchorEl)} onClose={props.handleClose} classes={styles} PaperProps={{ style: { maxHeight: ITEM_HEIGHT * 6, width: 315, padding: 0 } }} MenuListProps={{ style: { padding: 0 } }} > {props.children} </Menu>

I need to set left:50%; transform:translateX(-50%); to see the menu in the middle of the screen. But left position of the <Menu /> is generating by itself and I cannot edit it.

[oliviertassinari]

Have you tried this property? I'm not 💯% sure it will solve it, but it's a start.
https://github.com/mui-org/material-ui/blob/466c01fc7e7bc76adf5ad34da125daff43a1b206/src/Popover/Popover.js#L370

[oliviertassinari]

Maybe we could add a third option to disable this behavior (none)?

[nicoffee]

Hey!
I've added 'none' option, and it worked with following code:

<Menu
          id="simple-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
          anchorReference="none"
          PaperProps={{
            style: {
              width: 315,
              padding: 0,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}

          MenuListProps={{
            style: {
              padding: 0,
            },
          }}
        >
          <MenuItem onClick={this.handleClose}>Profile</MenuItem>
          <MenuItem onClick={this.handleClose}>My account</MenuItem>
          <MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>