Popper-core: Add `scrollingParent` as `boundariesElement` option

Created on 19 Jul 2016  Â·  9Comments  Â·  Source: popperjs/popper-core

Hello,

I'm having an issue with Popper inside a scrollable parent. It behaves weird. Could you maybe take a look?

CodePen demo

https://codepen.io/nadiam84/pen/LkQdLW

Another one with flex alignments and all positions (just in case)
http://codepen.io/nadiam84/pen/GqQbor

To make it more fun, Popper behaves perfectly inside a scrollable parent which is inside a parent with position 'fixed'.
http://codepen.io/nadiam84/pen/rLJEWg

Steps to reproduce the problem

Just scroll vertically

# ENHANCEMENT ✨ modifier

Most helpful comment

@nadiam84 The first example doesn't work because it's using viewport as boundaries element, but it's inside a scrolling div. Setting as boundariesElement the scrolling div everything works fine.
How would you solve this problem? Automatically setting the boundariesElement to the scrolling div or just asking users to properly define the boundaries?

https://codepen.io/FezVrasta/pen/akQpbW

Example 2 is fixed in the same way:
http://codepen.io/FezVrasta/pen/oLQBgp


PS: Actually the current behavior is the one suggested in the popper.js.org examples, all the examples ask to specify the boundariesElement if the container is scrollable.

All 9 comments

Can you confirm that the problem is caused by the big margin applied to the target?

Doesn't look like it. Updated the CodePen, made it without margins. Still the same issue.

The 2nd and 3rd examples work correctly, right?

1st and 2nd are wierd, 3rd is working correctly

Disabling preventOverflow the problem is fixed so I guess it could be related to #58

Ok the problem is not related to #58, I'm gonna investigate it right now.

@nadiam84 The first example doesn't work because it's using viewport as boundaries element, but it's inside a scrolling div. Setting as boundariesElement the scrolling div everything works fine.
How would you solve this problem? Automatically setting the boundariesElement to the scrolling div or just asking users to properly define the boundaries?

https://codepen.io/FezVrasta/pen/akQpbW

Example 2 is fixed in the same way:
http://codepen.io/FezVrasta/pen/oLQBgp


PS: Actually the current behavior is the one suggested in the popper.js.org examples, all the examples ask to specify the boundariesElement if the container is scrollable.

To summarize, we need to add scrollingParent as allowed boundariesElement value.

This will be the new default value and will always point to the closest scrollable parent (overflow !== initial)

Closing this in favor of #74.

Was this page helpful?
0 / 5 - 0 ratings