Datepicker: position remains fixed on scrolling

[sonalisabnam]

I have a jquery datepicker in my application. On scrolling the calander ui position remains fixed on the screen.

[Scott González]

Please provide a reduced test case showing the problem.

[jz10]

Since OP is apparently MIA, I will provide the test case in his place.

Place the datepicker control inside a scrollable div. The datepicker stays in place when div is scrolled.

Happens because the datepicker container is appended out in the body tag and not inside the parent div.

Quickfix: Append the container inside the parent div and play around with vertical positioning until you get it right.

[Scott González]

#8367 is a duplicate of this ticket.

[roosteronacid]

Test-cases and browser-tests

jsFiddle: ​http://jsfiddle.net/jbK6a/3/

OSX Lion: Latest versions of Mozilla FireFox, Google Chrome and Safari

Windows 7: Latest versions of Mozilla FireFox, Google Chrome and Internet Explorer 9 (including emulated IE8 mode)

Windows Vista: Internet Explorer 7

[tj.vantoll]

Still an issue in master, reduced test case - ​http://jsfiddle.net/tj_vantoll/QUFzw/.

[peter.fu]

Please also take the condition when parent container is a fixed DIV into consideration when fixing this one.

[Scott González]

See also #10082

[Arlen Johnson]

While a fix for this ticket is forthcoming, I post this simple solution (tested in jQuery UI 1.11.4) for those looking for a quick fix.

You can add a .bind() event to the end of the datepicker instantiation:

$("first-selector").datepicker().bind('click',function () {
  $("#ui-datepicker-div").appendTo("other-selector");
});

For example, the "other-selector" could be the parent of the "first-selector": $(this).closest('first-selector-parent'). This picks up the single #ui-datepicker-div box (which jQuery UI places at the end of the DOM) and moves it to a location somewhere else within the document. This can be used for multiple instantiations on a single page.

The "other-selector" should have position: relative; so that the absolutely positioned #ui-datepicker-div becomes positioned relative to the new parent. Once so, it scrolls just fine.

This solution allows the datepicker to work correctly on mobile devices and tablets where it can be hard to use if rendered partially off screen.

[Alexander M]

Do you guys have en estimation for when this issue will be fixed? This can be still reproduced in version 1.12.1