Position: Collision: fit doesn't work at top of window when scrolled

[bthompson00]

The collision argument of the position utility is not working properly. If the element to be positioned is going to fall off the bottom of the document (and hence also off the bottom of the window), the collision 'fit' ensures that the element to be positioned is bumped up, so that it fits in the window. Even if there is document below the bottom of the window, the position utility bumps the element up so that it fits in the window. Similiarly, if the positioned element is going to be positioned above the top of the document (and hence also off the top of the window), it gets bumped down, so that it fits in the window. This behaviour is all correct, and as to be expected. The bug occurs when there is document above the window. In this instance, the element to be positioned will overhang the top of the window, and is not bumped down.

I have created simple page which demonstrates the bug: ​http://www.bradthompsondesignstudio.com/jquery/

To explain in my example:

1. Scroll down the page, so that the scroll bar is in the middle (resize your browser if you do not see a vertical scroll bar).
2. Click on a bar in the middle of the page. The popup appears over the middle of the bar you just clicked. Perfect. (Click the popup to hide it).
3. Click a bar near the bottom of the page. The popup is bumped up, so that it fits in the window. Perfect again.
4. Now, click a bar near the top of the page. You'll notice that the popup is not bumped down to fit into the window (as it should have been). Instead it overhangs the top of the window, and we can't see all of it.

• I have tested jQuery UI versions 1.8.7 and 1.8.11, and the problem is present in both.
• Problem exists in all browsers tested on Windows 7 (IE6 & IE8.0.*, FF4.0, Chrome 10.0.*, Safari 5.0.4, Opera 10.60).
• Problem exists in all browsers tested on Windows XP (IE6 & IE8.0.*).
• Problem exists in all browsers tested on Mac OSX (FF3.6.*, Safari).

[jfremy]

Submitted a fix in ​https://github.com/jquery/jquery-ui/pull/189 Position fit was not checking if we were too far left / up compared to the top of the screen.

The fix does the following checks (in that order, first comes wins): 1) is the element considered to wide / high to fit the screen? If so, set its left / top coordinate to be the left / top border of the screen 2) is the element considered to far left / up? If so, set its left / top coordinate to be the left / top border of the screen 3) is the element considered to far right / down? If so, set its left / top coordinate so that the right / bottom side is on the right / bottom side of the screen 4) set the left / top corner to what was asked (but make sure the margin of the element is included)

[Jean-Francois Remy]

Position: Handled scrolled windows properly with collision: fit. Fixes #7211 - Position: Collision: fit doesn't work at top of window when scrolled.

Changeset: 5e44b3ce8851f62a38ce9211c6721e1050e2dabf