Not properly positioning when content overflows body

[Skinner927]

CodePen demo

http://codepen.io/Skinner927/pen/bwZvbZ

Steps to reproduce the problem

1. The first set of buttons works as expected. Popper is appended to the bottom of the green bar.
2. Scroll down to nearly the bottom of the page to the next set of buttons.
3. Click one of the buttons and the popper will not bind to the bottom of the green bar, but instead will bind to the top.

What is the expected behavior?

I would have expected the popper below to work exactly the same as the popper above, and place the content below the reference element.

What went wrong?

The bottom popper displays the content above the reference element instead of below.

Any other comments?

I'm suspecting this is happening because Popper thinks it is below the viewport so it's doing a flip, not really sure.

The issue is the page is designed poorly, by having the html and body elements at a fixed 100% so all the content is actually overflowing html and body. I'm thinking specifying a different boundariesElement might be the solution, but I'm totally stumped as neither 'viewport' or 'body' are working. I'm not sure this is a condition Popper.js should even support.

Do you have any suggestions where to start? I'm unable to alter the layout of the site unfortunately.

[FezVrasta]

Umh seems like a bug.

May you please strip out everything from the test page until you reach the minimum amount of code needed to reproduce the problem? This will help me a lot once I start working on this issue.

[FezVrasta]

Closing due to lack of response from the OP. I'll reopen it once the OP will provide the minimal test case required.

[Skinner927]

Sorry @FezVrasta, busy weekend.

I'll do my best to get the CSS and HTML minified enough so it's obvious what's causing the issue. I'll update this ticket when that is done.

Thanks for taking a look.

[FezVrasta]

Thanks!

[Skinner927]

@FezVrasta I've updated the original pen

http://codepen.io/Skinner927/pen/bwZvbZ

It seems the issue is the height: 100% on the body as the rest of the content renders in the overflow.

[FezVrasta]

If you set boundariesElement to window it works.
http://codepen.io/FezVrasta/pen/jrZrmj

I think it related to all the work we need to do on #75.

[Skinner927]

Thank you @FezVrasta for your super fast response. I swear we tried boundariesElement before with less luck (I promise I've read through the docs countless times and even read source). Again, thanks very much I've been able to use your response to help popper.js work correctly on my project.

However, I noticed something odd when the reference is floating: https://codepen.io/Skinner927/pen/jrZYPd
The content/popper will blow out of the boundariesElement.

Not sure if this is related to #75 or not. Oddly, this is what was happening on my project when setting boundariesElement to window, but changing it to the .wrapper (equivalent) seemed to have fixed it, but not in this codepen.

Again, thanks very much. I consider the original issue closed, but I'll let you choose what to do.

[FezVrasta]

I'm not sure why this is happening... Seems like a problem with the auto generation of the popper element. Creating it manually everything works great:
https://codepen.io/FezVrasta/pen/ozaELP

The auto-creation of elements is a feature deprecated in the v1 branch (we have replaced it with a complete side-library that takes care of all the needs of a common tooltip).

I don't think I'm going to spend time to find a fix to this problem, sorry. We are focusing on the v1 release, in this way you will have all the needed resources already available without need to write extra code.

[Skinner927]

That's fine as I'm not plagued by this issue 😄 , just brought it up as it seemed odd.

Again, thanks for you help, and thanks for all your work on this great library!

Take care,

Dennis