Position: collision: "flip" doesn't work in some situations

This is working fine for me. Are you seeing the problem in certain browsers?

Strange.. I've tested in IE9, FF and chrome

This is what I'm getting: http://i.imgur.com/CaCa6.png The long one is supposed to flip in that case, right?

(If I increase the window height slightly in the above screenshot and press "trigger position" it flips as expected)

Yup, I'm seeing the problem now. It seems to only appear with certain heights and certain scrolling.

#8733 is a duplicate of this ticket.

The problem occurs with me too. When i use the autocomplete and the overflow occurs on bottom page, the collision:flip have problems. With collision:fit the behavior is ok.

The problem occurs with the last version of jQuery and jQuery-ui released. WHen i use jquery-1.7.2.min.js and jquery-ui-1.8.20 the problem doesn't occurs.

With position FLIP is problem: http://s10.postimage.org/txakha1e1/position_flip.png

With position FIT is ok: http://s8.postimage.org/kyxeu6f85/position_fit.png

Reverting https://github.com/jquery/jquery-ui/commit/7f808b2047725cd8fde51a948cb4e5f5946c82e1 seems to fix my problem.

PS: For my needs I'd rather want a "don't flip unless it makes the _whole_ element fit" option than "flip if more of the element fits when flipped" but that is obviously use-case dependent

The new version of jQueryUI (1.9.1) already had this change, and in some cases he still have problems with flip :(

**Reverting** that commit fixed my problem (ie. that commit seems to have introduced the bug)

I've ran into that problem too, and for what it's worth, here's another simpler test case: http://jsfiddle.net/meyertee/twrLf/

You can see the flip-behavior changing depending on the amount it overflows at the bottom.

I've also identified https://github.com/jquery/jquery-ui/commit/7f808b2047725cd8fde51a948cb4e5f5946c82e1 as the reason. As Deocarlos suggests, the motivation seems to be "only flip if it actually fits at the flipped position". But the code doesn't do that.

I have to say I don't think there is a bug here. In the original fiddle http://jsfiddle.net/q9h3A/, because the containment is the window, this only looks like a bug due to the framing done by jsfiddle. If you look at the exact same fiddle but using the full browser window http://jsfiddle.net/q9h3A/show, it works as expected.

As for the second fiddle http://jsfiddle.net/meyertee/twrLf/, it appears to also be working as expected. The red div flips because there is a space large enough to accommodate it (210px of padding and the element is 200px tall). If you change the padding to 200px or less, the flip doesn't happen.

There's definitely a bug. In the first fiddle the problem is only visible when the document is larger than the window. So take the full window version and adjust your browser size until there's a scrollbar. In the second one, even though there's space to fit the element after a flip, more of the element is visible if it doesn't flip, so it shouldn't flip.

To clarify: in the second fiddle the red layer is positioned to the bottom of the green layer. When making the display area smaller by moving the fiddle-separator down, it should flip to the top (because there's enough space and more space to the top then). It doesn't flip though, only within a small range it jumps up and then down again.

I'm working on a fix, just need to get the local setup & unit tests to work..

I created a pull request which reverts the aforementioned commit, and also added unit tests to show that the code before that commit already did what it seemingly aimed to fix.

If there is a another reason for the commit that I didn't see, maybe you could add it as a unit test to make its intention a bit more clear?

https://github.com/jquery/jquery-ui/pull/1071

I'm also reproducing this bug in a separate environment and also pinpointed it to the same line of code meyertee pointed out.

#10061 is a duplicate of this ticket.

I encountered this bug related to the flip position (in my case center top/bottom, but same cause) and the culprit is certainly the line referenced by meyertee. In my build 1.10.4 it is line 444 of jquery.ui.position.js (and also in the latest beta). The reversion of commit 7f808b2 solves it, however a smaller fix is possible because the root cause is a single inverted greater than/less than comparison (which did not account for the fact that negative values indicate overlap in the preceding if-block while positives do in this one).

The current line below:

if ( ( position.top + myOffset + atOffset + offset) > overBottom && ( newOverTop > 0 || abs( newOverTop ) < overBottom ) ) {

can be corrected to this:

if ( ( position.top + myOffset + atOffset + offset) < overBottom && ( newOverTop > 0 || abs( newOverTop ) < overBottom ) ) {

#9680 is a duplicate of this ticket.

Position: Restore old flip collision handling

This reverts commit 7f808b2047725cd8fde51a948cb4e5f5946c82e1.

Fixes #8710

Ref gh-1071

Changeset: ebaaca7206cae201ec069dbaed85bc8d6beeab32

Position: Add unit tests for bug 8710

Ref #8710

Closes gh-1071

Changeset: 4de983c6d5eacbdc668c0b7280d9818dd6281a53

Position: Restore old flip collision handling

This reverts commit 7f808b2047725cd8fde51a948cb4e5f5946c82e1.

Fixes #8710

Ref gh-1071

(cherry picked from commit ebaaca7206cae201ec069dbaed85bc8d6beeab32)

Changeset: 276cd5cd8cbef787328335a11ad19864242ccafd

Position: Add unit tests for bug 8710

Ref #8710

Closes gh-1071

(cherry picked from commit 4de983c6d5eacbdc668c0b7280d9818dd6281a53)

Changeset: 9db405798dd5fc8ee603991226916351ec2a0dda