CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Yunxiu Qiu
Yunxiu Qiu

Reputation: 169

How to make a drop-down menu appear exactly below the bar in Material-UI?

I created a drop-down menu by using Material-UI, and I found one thing annoying: I want to let my drop-down menu appear under the bar when I click it, but every time it just covers the bar (as the image below)

enter image description here enter image description here

Is there any way I can do to let the drop-down menu appear below the bar? (not covering the Your order label and the number)

My codes are as below: I try to modify the anchorOrigin property and transformOrigin property but it didn't work.

<Menu 
  id="order-menu" 
  anchorEl={anchorEl} 
  keepMounted 
  open={Boolean(anchorEl)}
  onClose={() => setAnchorEl(null)} 
  elevation={20} 
  getContentAnchorEl={null}
  anchorOrigin={{ vertical: "bottom", horizontal: "center", }} 
  transformOrigin={{ vertical: -100, horizontal: 150, }} >

I will really appreciate your help!

Upvotes: 7

Views: 7998

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81136

Here's an example that aligns the top-center (transformOrigin) of the menu with the bottom-center (anchorOrigin) of the button:

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MuiMenuItem from "@material-ui/core/MenuItem";
import styled from "styled-components";

const MenuItem = styled(MuiMenuItem)`
  justify-content: flex-end;
`;

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
        transformOrigin={{ horizontal: "center" }}
      >
        <MenuItem onClick={handleClose}>1</MenuItem>
        <MenuItem onClick={handleClose}>2</MenuItem>
        <MenuItem onClick={handleClose}>3</MenuItem>
        <MenuItem onClick={handleClose}>10</MenuItem>
        <MenuItem onClick={handleClose}>20</MenuItem>
        <MenuItem onClick={handleClose}>300</MenuItem>
      </Menu>
    </div>
  );
}

Edit MenuItem anchorOrigin bottom

Related documentation: https://material-ui.com/api/popover/#props

Upvotes: 11

Related Questions