PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Monday, November 7, 2022

[FIXED] How to make the Material UI menu dropdown at the bottom left of the button

 November 07, 2022     material-design, material-ui, menu, mui-datatable, reactjs     No comments   

Issue

I hope you guys are doing well! This is my code sandbox: https://codesandbox.io/s/hungry-agnesi-vn6039?file=/demo.tsx

I currently want to have the Material UI menu drop down below starting at the exact bottom left of the button. However, as visible in my code sandbox, the menu starts a little bit right of the desired spot I want. Is there a way for me to start the dropdown menu at the bottom left of the button? I really appreciate any responses!

Thanks!


Solution

You can add negative marginLeft in your dropdown like this. Here is the working codesandbox

      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
        MenuListProps={{
          "aria-labelledby": "basic-button"
        }}
        style={{ // Add here you negative margin
          marginLeft: "-8px"
        }}
      >

Let me know if it helps and if is ok for you to add the inline style. Or you can do the same by using a styled component.

[UPDATE] If you want to apply it in general you can use the theme (which I don't recommend unless you are sure about it) and override the MuiPopover component like this.

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  components: {
    MuiPopover: {
      styleOverrides: {
        paper: {
          marginLeft: '-8px'
        }
      }
    }
  },
});


Answered By - Akis
Answer Checked By - Marie Seifert (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing