Question 45864 in CSS Question posted in
Some basic documentation can be found here.

React Mui Override vertical alignment of Menu – CSS

The documentation of Mui states

When close to a screen edge, a basic menu vertically realigns to make sure that all menu items are completely visible.

This behavior is very inconvenient for the responsive pages I am writing since menus with a lot of items will start to pop over the menu button despite it being anchored to its bottom.

A fixed margin/distance isn’t a sollution because the position of the menu button might change vertically on a smaller screen.

How does one override or ‘turn off’ this kind of behavior?

Unfortunatly I can’t share my code online but the sandbox of the Mui Documentation can be modified pretty easily to illustrate my point.

Below two screenshots of the behavior I’m talking about.

Screen with large height

And on a smaller screen this will happen.

Sceen with small height

Tags:

2

Answers


  1. 0

    I wonder if setting max-height on the Menu would work for you? It’s a less hacky solution. You could even use calc

    sx= {{ maxHeight: 100 }}
sx= {{ maxHeight: "calc(100% - 40px)" }}

    OR

    PaperProps= {{ sx: { maxHeight: 100 } }}
PaperProps= {{ sx: { maxHeight: "calc(100% - 40px)" } }}
    Login or Signup to reply.
  2. 0

    You can change the anchor position to show the menu to the right. This way the button will be always visible. Add this to the Menu props.

        anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'left',
    }}

    enter image description here

    You can expertiment the positions from here

    Another option is to set min-height based on the screen resolution using the sx prop.

    sx={{maxHeight: {xs:250, md:500}}}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search