CODEWITHSUNDEEP
jqueryjquery-uiscrolljquery-ui-datepicker
Swifty
Swifty

Reputation: 1432

jQuery UI datepicker positioning issue in scrollable div

My page contains a form inside a scrollable div. In the form there are a few datepickers. If I scroll while the datepickers are open, they do not scroll with the content of the div.

I've found a hundred posts with the same issues online, but none of the solutions work in my environment.

This jsfiddle demostrates my problem: Problem

And this jsfiddle demostrates a fix: Fix

$("input").datepicker({
 beforeShow: function(input, obj) {
    $(input).after($(input).datepicker('widget'));
}
});

The fix is done in jQuery v1.7.2, I'm using v1.10.2 with jQuery UI v1.10.3. If you switch the jQuery library version to v1.10.2 in the fix jsfiddle, the datepicker breaks.

Is there a working fix for the latest jQuery library? (If its of any consequence, I'm using MVC4 with EF4.5)

Upvotes: 4

Views: 6015

Answers (2)

Shikha Agarwal
Shikha Agarwal

Reputation: 301

The given fix in jsFiddle is working but you need to fix the top and left position of the datepicker according to parent element.

Upvotes: 0

Spartanicus
Spartanicus

Reputation: 76

While this question is old, I'll share my recent solution:

The problem exists because the #ui-datepicker-div created by jQuery UI is added as an absolutely positioned element near the end of the DOM. Attempting to change its position in beforeRender gets overridden by jQuery UI. This is a known issue: see https://bugs.jqueryui.com/ticket/8223

To solve this problem (tested in jQuery UI 1.11.4) 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 element to which the datepicker is attached: $(this).closest('the-datepicker-element-parent'). This moves the single #ui-datepicker-div box (which jQuery UI places at the end of the DOM) to its new location where you can better control its positioning.

Specifically, "other-selector" should be position: relative; making the absolutely positioned #ui-datepicker-div relative to its new parent. Once so, it scrolls just fine.

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

Upvotes: 3

Related Questions