Skip to main content

Search and Top Navigation

#7211 closed bug (fixed)

Opened March 30, 2011 06:54AM UTC

Closed May 03, 2011 08:39AM UTC

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).
Attachments (0)
Change History (4)

Changed March 30, 2011 11:07AM UTC by rdworth comment:1

status: newopen

Changed March 30, 2011 12:02PM UTC by scottgonzalez comment:2

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

Changed April 25, 2011 04:43PM UTC by jfremy comment:3

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)

Changed May 03, 2011 08:39AM UTC by Jean-Francois Remy comment:4

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