search

floating-ui / react-popper

🍿⚛Official React library to use Popper, the positioning library
https://popper.js.org/react-popper/
MIT License
2.51k stars 225 forks source link

How to handle popper when there is an header in position fixed #385

Closed Filippinifra closed 4 years ago

Filippinifra commented 4 years ago

Reproduction demo

Screenshot 2020-09-13 at 12 30 00

Steps to reproduce the problem

It's so easy to reproduce it. Take a top position fixed element and an element that scrolls inside the page referred to the popper (top placement). When popper is near the top zone of the page it collides with fixed element (it can be over or below the fixed element for example depending to z-index).

What is the expected behavior?

I want the popper knows that he cannot be in the former top px of the page and when it collides with header its replacement is bottom.

Packages versions

FezVrasta commented 4 years ago

Ciao, you can set the padding option in the preventOverflow modifier.

https://popper.js.org/docs/v2/modifiers/prevent-overflow/#padding