Opened 5 years ago

Closed 5 years ago

#9940 closed bug (invalid)

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.

Change History (2)

comment:1 Changed 5 years ago by tj.vantoll

Owner: set to 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/.

comment:2 Changed 5 years ago by trac-o-bot

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!

Note: See TracTickets for help on using tickets.