jQuery UI datepicker positioning issue в прокручиваемом div

Question

Моя страница содержит форму внутри прокручиваемого div. В форме есть несколько датпикеров. Если я прокручиваю, когда датыпикеры открыты, они не прокручиваются с содержимым div.

Я нашел сто сообщений с одинаковыми проблемами в Интернете, но ни одно из решений не работает в моей среде.

Это jsfiddle demostrates мою проблему: Problem

И это jsfiddle demostrates исправление: Fix

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

Исправление делается в JQuery v1.7.2, я использую 1.10.2 с jQuery UI v1.10.3. Если вы переключите версию библиотеки jQuery на v1.10.2 в исправление jsfiddle, произойдет отмена datepicker.

Есть ли исправление для последней библиотеки jQuery? (если его каких-либо последствий, я использую MVC4 с EF4.5)

Answer 1

Хотя этот вопрос стар, я поделюсь своим недавнее решение:

Проблема существует потому, что # щ-datepicker- div, созданный jQuery UI, добавляется как абсолютно позиционированный элемент ближе к концу DOM. Попытка изменить свое положение в beforeRender переопределяется jQuery UI. Это известная проблема: см https://bugs.jqueryui.com/ticket/8223

Чтобы решить эту проблему (протестировано в JQuery UI 1.11.4), вы можете добавить .bind() событие к концу Datepicker конкретизации:

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

Для Например, «other-selector» может быть родительским элементом элемента, к которому привязан datepicker: $ (this) .closest ('the-datepicker-element-parent-parent'). Это перемещает единственный блок # ui-datepicker-div (который пользовательский интерфейс jQuery помещается в конец DOM) в новое место, где вы можете лучше контролировать свое позиционирование.

В частности, «другой селектор» должен быть позиционным: относительный; что делает абсолютно позиционированный # ui-datepicker-div относительно его нового родителя. Как только это так, он просто прокручивается.

Это решение позволяет корректно работать с устройством datepicker на мобильных устройствах и планшетах, где в противном случае это может быть сложно использовать, если сборщик частично отстранен от экрана.