-
-
Notifications
You must be signed in to change notification settings - Fork 227
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to size popper dynamically with detectOverflow #452
Comments
Did you try the https://www.npmjs.com/package/popper-max-size-modifier package? |
I deprecated that and pointed to https://floating-ui.com/docs/size as it was buggy in a couple ways — I recommend just switching to Floating UI as it's getting full support and the size modifier is much more reliable and easier to use |
Thank you both so much for your help! @atomiks awesome, Floating-UI looks like the way to go 💯 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Reproduction demo
Steps to reproduce the problem
detectOverflow
modifier that attempts to modify the size of the popper if overflow is detected (ie if right/left/top/bottom > 0):What is the expected behavior?
Based on this response: #73 I would expect to be able to manually update the size of the popper when overflow is detected.
What went wrong?
I'm unsuccessful in trying to update the height and width of the popper based on available screen size. Previously I had done this outside of the modifier in a
useEffect
based on screen size, but because we don't always have the popper attributes available (ie position, sometimes they're null when it hasn't initialized yet) to know how much available space we actually have, then we have to make it smaller based on width so we can eventually fit the popper over top of the anchor, when there's really plenty of space, say, to the left.Any other comments?
Please let me know if you need anything else from me! Thank you so much for making this Popper.js free, it's one of my all-time favorites libs.
Packages versions
The text was updated successfully, but these errors were encountered: