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)
javascripthtmlcssreactjsmaterial-ui

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to implement a select all feature using React and MaterialUI

I am facing a challenge with managing multiple sets of checkboxes independently along with a toggle that can switch them all on or off within their respective groups. Each checkbox has two states, and I can identify the checkbox being clicked using event.t ...

javascriptreactjs

Utilizing CSS and jQuery to align images in the center of the screen

I'm attempting to display a larger image when hovering over a thumbnail using jQuery and CSS. I have two images like this <td> <% if camera["is_public"] == "t" %> <img src="https://media.evercam.io/v1/cameras/&l ...

javascriptjqueryhtmlcss

Looking for a way to exclude both parents and children from a list of relatives? Want to ensure that the

I've been struggling to align these list elements with their counterparts, but they seem to automatically create a margin for their child elements. It is essential for these list items to maintain the position:relative attribute so that the #dropdown ...

csslistdrop-down-menuheight

Utilizing CSS to set a map as the background or projecting an equirectangular map in the backdrop

How can I set an equirectangular projection like the one in this example http://bl.ocks.org/mbostock/3757119 as a background for only the chart above the X-axis? Alternatively, is it possible to use an image of a map as a CSS background instead? .grid . ...

javascripthtmlcsssvgd3.js

How can I retrieve a password entered in a Material UI Textfield?

My code is functioning properly, but I would like to enhance it by adding an option for users to view the password they are typing. Is there a way to implement this feature? const [email, setEmail] = useState(''); const [password, setPassword] = ...

javascripthtmlreactjstypescriptmaterial-ui

When using npm bootstrap in a React project, the JavaScript features may not function properly

I am currently working on a React project and I needed to add a navbar. To achieve this, I installed Bootstrap using the following command: npm install bootstrap After installation, I imported Bootstrap into my index.js file like so: import 'bootstra ...

reactjstwitter-bootstrapnpm

Is there a way to lower just one border?

I need assistance with moving the .container div downward on my webpage. I attempted using (margin-top: 30px) and it worked, but unfortunately, it also shifted down the border of the (.container) along with the outline of .all. My goal is to have only the ...

htmlcss

Transform your scene into a stunning 3D texture using THREE.js's 3D Render Targets feature

After exploring the THREE.js example available here, I am curious about how to avoid scenes rendered as textures from appearing 'flattened'. Essentially, I want to maintain the depth illusion within the scene when using a WebGLRenderTarget. I ha ...

javascriptthree.jswebgl

"Utilize Vuejs to establish a binding between two objects when necessary

With the help of moment, my calendar generates 41 days. for (let x = 0; x < 42; x++) { context.add(1, 'd'); let day = { 'date': moment(context), 'events': [] }; } ...

javascriptlaravelvue.js

Creating an AngularJS service or factory that dynamically compiles HTML using a variable from the $scope

Looking to streamline a commonly used function in various controllers within an AngularJS project by creating a service/factory that can be accessed through $rootScope. The objective is to refactor the existing function: $scope.twitterRefresh = function(o ...

javascriptangularjsangularjs-scope

Things, their examples and the impact of setTimeOut

I'm currently delving into object oriented programming in JavaScript. function doStock() { //my class var that = this; var nAntiFreeze = null; // timeout ID var getContent = function(oInPageContainer) { GM_log('Antifreeze, before clea ...

javascriptobjectgreasemonkeysettimeout

What is the process for adding CSS to a Zend project?

I am encountering an issue with appending images or CSS files in my Zend project. I have placed my CSS file in the following directory: project/public/css/style.css Unfortunately, when attempting to include this CSS file on my page, it does not work as e ...

cssimagezend-framework

Manipulate Browser Navigation Behavior using JavaScript or AngularJS

How to Manage Browser Back Button Behavior Using AngularJS or JavaScript This is not a question, but rather a demonstration of how you can disable and manipulate the behavior of the browser's back button when using AngularJS or plain JavaScript. ...

javascriptangularjsbuttonbrowserback

Error is being thrown due to defining a variable after it has already been declared and

Before I use a variable, I encountered the issue of using it before its definition, interface IProps extends WithStyles<typeof STYLES>; const STYLES = () => ({ }) Although it didn't cause any errors, a warning appeared: STYLES used befo ...

reactjstypescriptmaterial-ui

problem with running a node server on localhost

I've been attempting to test a simple Javascript file, but I'm encountering difficulties. When I try to load the page in my browser, it seems to be stuck loading forever with no warnings. At the bottom of the page, a text bar appears stating "wai ...

javascriptnode.jsexpress

Attempting to modify header color in various website sections without success

I've been struggling to figure out this code: <script> window.onload = function() {myFunction()}; window.onscroll = function() {myFunction()}; function myFunction() { const top1 = document.getElementById("big-landing ...

htmljquerycssresponsive-design

Exploring methods to access the state of a component nested within a slot in Vue

I'm facing a challenging issue that I can't seem to solve ...

javascriptvue.jsvuejs3vue-composition-api

Repeating every 3 to 6 months on later.js commencing from a specified date

Currently, I am working on setting up recurring events every 3 and 6 months using the later.js library which can be found at https://github.com/bunkat/later. The code implementation looks like this: // Assuming my value.scheduled_date is set to 2018-09-0 ...

javascriptnode.jslaterjs

Manipulating CSS animations through JQuery

Currently, my animation is triggered by a :hover event. However, I would like to change it so that the animation starts when a button is clicked. Can someone guide me on how to manipulate the CSS using JQuery? //CSS .mouth{ top: 268px; left: 273px; ...

javascriptjquerycss

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page

In the admin pages of my Wordpress installation, I have created an HTML form. My goal is to validate the data inputted when the submit button is pressed using a Javascript function. If the data is not correctly inserted, I want alerts to be displayed. Desp ...

javascriptphphtmlwordpress