Opened 9 years ago

Closed 9 years ago

#7211 closed bug (fixed)

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

Reported by: bthompson00 Owned by:
Priority: major Milestone: 1.9.0
Component: ui.position Version: 1.8.11
Keywords: Cc:
Blocked by: Blocking:

Description

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).

Change History (4)

comment:1 Changed 9 years ago by rdworth

Status: newopen

comment:2 Changed 9 years ago by Scott González

Priority: minormajor
Summary: jQuery UI Position Utility BugPosition: Collision: fit doesn't work at top of window when scrolled

comment:3 Changed 9 years ago by 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)

comment:4 Changed 9 years ago by Jean-Francois Remy

Resolution: fixed
Status: openclosed

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

Changeset: 5e44b3ce8851f62a38ce9211c6721e1050e2dabf

Note: See TracTickets for help on using tickets.