Hello,
I'm having an issue with Popper inside a scrollable parent. It behaves weird. Could you maybe take a look?
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
Just scroll vertically
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.
Most helpful comment
@nadiam84 The first example doesn't work because it's using
viewportas 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
boundariesElementto 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
boundariesElementif the container is scrollable.