Ticket #3863 (closed bug: fixed)

Opened 6 years ago

Last modified 5 years ago

datepicker calendar renders at wrong vertical position

Reported by: jezaustin Owned by: caphun
Priority: critical Milestone: 1.7
Component: ui.datepicker Version: 1.6rc5
Keywords: datepicker position _checkOffset Cc:
Blocking: Blocked by:

Description

On Firefox 3.0.5 & IE7, jQuery 1.3, jQuery-UI 1.6rc5, the datepicker calendar is rendered too high up in the document, and I must scroll up to find it. Seems to be going wrong in _checkOffset, where

// now check if datepicker is showing outside window viewpoint -
// move to a better place if so.
offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
    Math.abs(offset.left + dpWidth - viewWidth) : 0;
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
    Math.abs(dpHeight + inputHeight*2 - viewHeight) : 0;

I replaced with these lines, which butt the calendar up against the bottom and/or right edges of the view port if necessary.

if (offset.left + dpWidth > $(document).scrollLeft() + viewWidth 
    && viewWidth > dpWidth) 
    offset.left = $(document).scrollLeft() + viewWidth - dpWidth;

if (offset.top + dpHeight > $(document).scrollTop() + viewHeight
    && viewHeight > dpHeight)
    offset.top = $(document).scrollTop() + viewHeight - dpHeight;

But I'm not super confident that I understood the purpose of the original code.

Attachments

example.zip Download (143.9 KB) - added by Spir 5 years ago.
Example of the bug

Change History

comment:1 Changed 6 years ago by bgunnink

I can confirm this bug with Firefox 3.0.5, jQuery 1.3, an UI 1.6rc5.

Datepicker instances on the top or middle of the page function as expected, but any instances which will clip the bottom of the viewport are placed near the top of the page.

comment:2 Changed 5 years ago by rdworth

  • Priority changed from major to critical

Changed 5 years ago by Spir

Example of the bug

comment:3 Changed 5 years ago by kuroi

The algorithm makes the incorrect implicit assumption that the page is located top left in the view point. If it is not, then the _checkOffset method will attempt to relocate the calendar upwards and/or leftwards to appear there.

On long pages where the visitor has scrolled down this can result in the calendar being moved so far upwards that it is rendered outside the actual current viewable area.

comment:4 Changed 5 years ago by caphun

  • Owner set to caphun
  • Status changed from new to accepted

comment:5 Changed 5 years ago by chrisv

Was about to submit new ticket when I found this one - I'm adding this link in case it assists in debugging.

Example (with ghastly html, I won't try to explain why!):

 http://bookings.premiersport.org/admin/candidates/test-cand.html

Datepickers on date fields lower down the page appear higher than they should, most noticable on the very bottom one.

I've simplified as far as I could the HTML to narrow down testing issues, but as I strip out html, the problem diminishes.

The problem is more noticable on IE(7.0) than FF(3.0).

comment:6 Changed 5 years ago by caphun

  • Status changed from accepted to closed
  • Resolution set to fixed

Fixed in r1820. Thank you Spir and chrisv for the test cases.

comment:7 follow-up: ↓ 8 Changed 5 years ago by pointym5

I'm seeing a problem that may be similar to this, with 1.7.2 on top of jQuery 1.4. My input field is towards the top of an iframe, and the datepicker code gives it a "top" offset of -33 pixels for some reason.

comment:8 in reply to: ↑ 7 Changed 5 years ago by pointym5

Replying to pointym5:

I'm seeing a problem that may be similar to this, with 1.7.2 on top of jQuery 1.4. My input field is towards the top of an iframe, and the datepicker code gives it a "top" offset of -33 pixels for some reason.

No, my problem was different. The code in "_checkOffset" that tries to adjust for the datepicker spilling out of its viewable page area was deciding to slide the top of the datepicker 50 pixels to the north. I'm not sure why that's better than just letting me see the bottom of the datepicker box cut off; that would certainly have been less confusing. However it's not at all related to this issue.

Note: See TracTickets for help on using tickets.