How do I offset Material-UI Popper (popper.js library) position on y-axis?

user_5314516 0
Viewed 6192

enter image description here

I am using a material-ui (v 4.9.5) Popper for a "pop-out" menu as above. It's anchorElement is the selected ListItem on the left. I want the Popper to appear flush with the top of the main menu. However it appears 5px short.

If I look at the Chrome Dev Tools I see the following and the 5px value within the translate3d parameters is the issue. If I change the value to 0px within the Dev Tools the problem is solved.

enter image description here

My question is how do I get this to happen through the code. I've tried the following using modifiers for the underlying popper.js and it does nothing.

 <Popper
    modifiers={{
        offset: {
         enabled: true,
         offset: '-5, 0'
    },
    }}
    className={globalMenuStyle.popperStyle}
    placement="right-end"
    open={isPopoverOpen}
    onClose={handleHidingGlobalMenu}
    anchorEl={anchorElement}>
    {popoverMenuItems}
 </Popper>

Even stranger is that if I experiment and try something like this and try the x-axis for the modifiers it shifts along the x-axis. Why does x-axis work and y-axis doesn't ?

modifiers={{
   offset: {
    enabled: true,
    offset: '0, 50'
},
}}

enter image description here

popper.js material-ui reactjs css javascript
3 Answers

Use the popperOptions prop to provide the options obj to the popper.js instance like so:

<Popper
   popperOptions={{
      modifiers: {
         offset: {
             offset: '-5,0',
         },
      },
    }}
    ....
</Popper>
user_49889950

Version 5.0 of Material UI and up uses Popper 2.0 which has slightly different syntax.

<Popper
    modifiers={[
      {
        name: "offset",
        options: {
          offset: [0, 50],
        },
      },
    ]}
  >
  </Popper>
user_37187530

This is the fastest way to add offset to the Material Ui popper component.

  <Popper
        open={open}
        anchorEl={anchorRef.current}
        modifiers={{
          flip: {
            enabled: false,
          },
          offset: {
            enabled: true,
            offset: '300,100',
          },
        
      >

the reference here for more info MUI popper.js

user_130844280
Related