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 comment:1
| status: | new → open |
|---|
Changed March 30, 2011 12:02PM UTC by comment:2
| priority: | minor → major |
|---|---|
| summary: | jQuery UI Position Utility Bug → Position: Collision: fit doesn't work at top of window when scrolled |
Changed April 25, 2011 04:43PM UTC by 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)