Question 204977 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I make the Material UI mobile menu to start from the leftmost part of the screen?

Here is a screenshot of the issue:
Here's a screenshot with the issue

I am designing the UI for a web app I am working on with React and Material UI for the mobile orientation. I have been trying to get the sidebar menu to appear starting from the leftmost part of the screen, and there seems to be some sort of margin that won’t let the left part of the menu start from the left edge. It starts a few pixels after. What can I do?

Here’s a piece of my code for reference:

<Menu
    className='menu-style'
    anchorReference="anchorPosition"
    anchorPosition = {{top: 90, left: 0}}
    anchorOrigin={{vertical: 'top', horizontal: 'left'}}
    transformOrigin={{vertical: 'top', horizontal: 'left'}}
    anchorEl={null}
    open={isOpen}
    onClose={() => setIsOpen(false)}
    PaperProps={{
        style: {
            width: '80vw', 
            margin: '0 !important',
            height: '100vh',
        },
    }}
>
    <MenuItem onClick={() => setIsOpen(false)}>
        <a href='#'>Buy</a>
    </MenuItem>
</Menu>

I have tried setting the margins to 0 with the paper props style but it’s not responding to it. The dropdown menu still starts a few pixels after the left, instead of from the leftmost part. No parent components have any margins added to them either.

Tags:

2

Answers


  1. 0

    I think you need to pass styles to sx property, not PaperProps > style.

    For example:

    <Menu
  /* other props */
  PaperProps={{
    style: {
      width: "80vw",
      height: "100vh",
    },
  }}
  sx={{
    margin: 0,
    padding: 0,
  }}
>
  <MenuItem onClick={() => setIsOpen(false)}>
    <a href="#">Buy</a>
  </MenuItem>
</Menu>
    Login or Signup to reply.
  2. 0

    Would a Drawer be a better component in your use case?

    With that aside, you can use the sx prop or the styled functionality combined with the provided class definition menuClasses to position the menu statically.

    import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { menuClasses } from '@mui/material';

export default function PositionedMenu() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div style={{ textAlign: 'right' }}>
      <Button
        id="demo-positioned-button"
        aria-controls={open ? 'demo-positioned-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        Dashboard
      </Button>
      <Menu
        id="demo-positioned-menu"
        aria-labelledby="demo-positioned-button"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        sx={{
          [`& .${menuClasses.paper}`]: {
            left: '0 !important',
          },
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

    The !important is required as you are fighting popper which is attempting to dynamically position your menu by assigning left and top as a direct style.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search