Hassan Sardar Hassan Sardar - 1 month ago 7
Javascript Question

Datepicker Position not fixed with textfield in popup

I have a Fancy Box Popup. In which I have a long Content. That content includes a Date of Birth Field with Datepicker.

Now when I click in field Calender appears but it doesnot remains with the textfield when I scroll with my mouse wheel, the datepicker doesnot moves , its remains on the same place where it was opened, i want it to move with the scroll.

Here is the FIDDLE DEMO with this issue :


http://jsfiddle.net/PFVxK/1314/

Just click on Popup and then click in Textfield, and then scroll it,

How can I fix this ?

Answer

The datapicker positions the calendar based on input original position. However, it doesn't reposition when you scroll. However you could reposition the datepicker on fancybox scroll.

afterLoad: function () {
    $('.fancybox-inner').on('scroll', function () {
        var inp = $(this).find('input.hasDatepicker');
        $('#ui-datepicker-div').css('top', inp.offset().top + inp.outerHeight());
    });
}, beforeClose: function () {
    $('.fancybox-inner').off('scroll');
}

afterLoad and beforeClose are callback methods triggered by fancy box after loading the fancy box and before closing the box.

Check out the demo http://jsfiddle.net/NsNHZ/1/ and let me know if it works for you.

Comments