Skip to main content

Search and Top Navigation

#9940 closed bug (invalid)

Opened March 28, 2014 02:37PM UTC

Closed April 12, 2014 08:52AM UTC

Datepicker on modal - incorrect position calculation

Reported by: omarhimada Owned by: omarhimada
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.8.20
Keywords: Cc:
Blocked by: Blocking:
Description

''L ~7680:''

inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
'static' : (isFixed ? 'fixed' : 'absolute')), display: 'none',
left: offset.left + 'px', top: offset.top + 'px'});

The offset here (specifically top) is not being calculated correctly when the datepicker is embedded on a modal. If the user scrolled down the page a little bit before opening the modal, then the datepicker is rendered, it is positioning the datepicker along the Y axis of the page much further down than appropriate.

I believe this is caused by these lines here:

''L ~7324:''

var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
this._pos = // should use actual width/height below
[(browserWidth / 2) - 100 + scrollX, (browserHeight / 2) - 150 + scrollY];

My solution, however hack-ish, was to change L ~7682 from

left: offset.left + 'px', top: offset.top + 'px'});

to

left: ($(".ui-datepicker-trigger:visible").offset().left + 28) + 'px', top: ($(".ui-datepicker-trigger:visible").offset().top - document.body.scrollTop) + 'px'

Where :visible is used because in our project we have multiple ui-datepicker-trigger's (the unused ones being hidden via display:none). I believe the use of document.body.scrollTop is paramount versus document.documentElement.scrollTop because of how the modal is rendered.

Attachments (0)
Change History (2)

Changed March 28, 2014 03:06PM UTC by tj.vantoll comment:1

owner: → omarhimada
status: newpending

HI omarhimada,

Thanks for taking the time to contribute to jQuery UI. Can you please create a test case that shows this problem in action? You can use this as a starting point: http://jsfiddle.net/tj_vantoll/2ek4r/.

Changed April 12, 2014 08:52AM UTC by trac-o-bot comment:2

resolution: → invalid
status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!