Fix the Mui Popper on the screen in the same position-CodePudding

I would like to fix the mui Popper in the same position on the screen, always 10px from the left and 50px from the top, regardless of where its parent Element lands. I have tried what seems like everything, playing with popperOptions modifiers and placement but no luck. Has anyone been able to fix their Popper?

<Popper
    id="suggestion-dropdown"
    {...props}
    popperOptions={{ placement: "fixed" }}

  />

CodePudding user response：

The Material-UI Popper component is built on top of the Popper.js library, which allows you to position elements relative to other elements on the page. To fix the position of a Popper element, you can use the positionFixed option in the popperOptions prop of the Popper component. This will ensure that the Popper element is positioned relative to the viewport, rather than to its parent element.

In addition to this, You can also use the modifiers options in popperOptions to adjust the position of the Popper element. Specifically, you can use the offset modifier to adjust the position of the Popper element.

Here's an example of how you might use these options to position a Popper element 10px from the left and 50px from the top:

import { Popper } from "@material-ui/core";

const popperOptions = {
  positionFixed: true,
  modifiers: {
    offset: {
      offset: "10px, 50px"
    }
  }
};

<Popper open={open} anchorEl={anchorEl} popperOptions={popperOptions}>
  <div>My Popper Content</div>
</Popper>

It's also worth noting that you can use more complex values like functions with the offset to make more dynamic positioning. Also please be aware of the placement prop, since it might be affecting the final position of the popper.

I hope this helps!