CODEWITHSUNDEEP
reactjsmenumaterial-ui
assembler
assembler

Reputation: 3302

ReactJS Material-UI how to fix a component on top of an anchored menu

I'm using Material-UI and I'm trying to place a fixed component on top of an anchored menu, that is to say I have a button that I click and then a menu is displayed. I need to put a component on top of this menu and keep it visible all the time, something like this:

enter image description here

but when I scroll down, the component scrolls too. I need to keep this visible despite the position of the scroll.

These are the approaches I've been trying:

const renderMenu = () => {
    const items = [];
    for (let i = 0; i < 20; i += 1) {
      items.push(`Item ${i + 1}`);
    }
    return (
      <>
        {"Test one"}               <-----
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          PaperProps={{
            style: {
              maxHeight: "200px"
            }
          }}
          open={Boolean(anchorEl)}
          onClose={handleClose}
        >
          {"Test two"}             <-----
          {items.map((item) => (
            <MenuItem onClick={handleClose}>{item}</MenuItem>
          ))}
        </Menu>
      </>
    );
  };

  return (
    <>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
        style={{ float: "right" }}
      >
        Click on me
      </Button>
      {anchorEl && renderMenu()}
    </>
  );

Test one is displayed outside the popup and Test two scrolls away. Here is a working codesandbox.

Any idea on how to solve this?

Upvotes: 2

Views: 1462

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

You can use position: fixed to fix the position of Test 2 but there is a limitation where you need to define the width of the menu and Test 2.

Here is the codesandbox, used inline style for quick demonstration:

https://codesandbox.io/s/material-demo-forked-6yz0l?file=/demo.js

<MenuItem // <-- use MenuItem to wrap the Test 2 to match the menu item css as much as possible
    style={{
        position: "fixed",  // fix the position to avoid it scrolling
        backgroundColor: "#ececec",
        zIndex: 1,          
        marginTop: "-8px",  // to align with original menu top margin
        width: "40%"        // need to have fix width. Otherwise, it will only follow content width
        borderRadius: "5px 5px 0px 0px"  // add the top corner border radius to match the menu style
    }}
    button={false} // to stop clicking effect
>
  {"Test two"}
</MenuItem>

Upvotes: 2

Related Questions