Positioning a Material UI Menu item underneath its parent element using CSS styling

Question

Positioning a Material UI Menu item underneath its parent element using CSS styling

I have created a Material UI dialog that features some text and an Icon with a dropdown menu option. You can check out the demo here: https://codesandbox.io/s/prod-rain-1rwhf?file=/src/App.js

My goal is to properly position the Menu component so that it appears right below the Settings component when clicked. I have applied a 'position: relative' style to the parent element (Settings Icon) and a 'position: absolute' along with 'top: -10px' to the child element (Menu component), but this setup doesn't seem to be working as intended.

Can anyone provide guidance on how I can make sure that clicking the Settings icon triggers the appearance of the Menu directly beneath it, and also ensure that the positioning adjusts accordingly when the window is resized?

UPDATE:

If there are any issues accessing the codesandbox link, here is the code snippet:

App.js:

(code snippet for App.js)

styles.css:

(code snippet for styles.css)

javascript html css reactjs material-ui

Answer 1

Answer №1

For further information, please consult the documentation provided below:

https://mui.com/components/menus

If you need a visual demonstration, feel free to explore the sandbox that I have set up:

https://codesandbox.io/s/elastic-hooks-0fi6z?file=/src/App.js

 const [anchorEl, setAnchorEl] = useState(null);

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

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

  const open = Boolean(anchorEl);

<DialogActions>
          <div>
            <Button id="basic-button" onClick={handleClick}>
              Dashboard <Settings />
            </Button>
            <Menu
              id="basic-menu"
              anchorEl={anchorEl}
              open={open}
              onClose={handleClose}
              anchorOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
              transformOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
            >
              <MenuItem onClick={handleClose}>Profile</MenuItem>
              <MenuItem onClick={handleClose}>My account</MenuItem>
              <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
          </div>
        </DialogActions>

Answer 2

For further information, please consult the documentation provided below:

https://mui.com/components/menus

If you need a visual demonstration, feel free to explore the sandbox that I have set up:

https://codesandbox.io/s/elastic-hooks-0fi6z?file=/src/App.js

 const [anchorEl, setAnchorEl] = useState(null);

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

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

  const open = Boolean(anchorEl);

<DialogActions>
          <div>
            <Button id="basic-button" onClick={handleClick}>
              Dashboard <Settings />
            </Button>
            <Menu
              id="basic-menu"
              anchorEl={anchorEl}
              open={open}
              onClose={handleClose}
              anchorOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
              transformOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
            >
              <MenuItem onClick={handleClose}>Profile</MenuItem>
              <MenuItem onClick={handleClose}>My account</MenuItem>
              <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
          </div>
        </DialogActions>

Positioning a Material UI Menu item underneath its parent element using CSS styling

Answer №1

Similar questions

Tips on waiting for an event to be processed during a Protractor end-to-end test

Adjust the panel size accordingly for smaller screens

Design and execution of webpage structure

Guide to retrieving targeted JSON information with an identifier (React Hooks)

Passing a selected value from the child to the parent component through state in React using hooks

Issue with Ng-style not functioning properly when setting background color

Preview not showing CSS changes properly

The element in the iterator in next.js typescript is lacking a necessary "key" prop

Why are my custom material UI styles not showing up after the deployment?

Problem: values.map is not a function (What causes this error to occur?)

Using PHP to ascertain the requested dataType or responseType from the client

The magical form component in React using TypeScript with the powerful react-final-form

The body can only stretch up to a certain percentage of its width, not a full 100%

Building a stack of DIVs, some with fixed heights and others without, potentially using only CSS

Is the use of "as" necessary in NextJS dynamic routing?

Customize MUI Tabs to resemble the design of Bootstrap Nav Tabs

jQuery does not have the capability to access the href attribute through DOM manipulation

Interactive data table feature in React, transferring selected row data to a modal pop-up

Steps to resolve the error message 'Argument of type 'number' is not assignable to parameter of type 'string | RegExp':

Having trouble getting Jquery Ajax Post to work properly when using JinJa Templating?