jquery-ui datepicker does not keep its position relative to its element when zooming-in

Question

I have a slight problem jquery-ui datepicker that occurs if the input (datepicker is attached to) is placed inside an element with margin: 0px auto. If you zoom in (ctrl +), a displayed datepicker does not keep its position relative to the input. It causes some problems in mobile browsers when there is an automatic zoom-in when filling a form. There are no troubles if margin: 0px auto is removed but I'd like to keep it.

fiddle: http://jsfiddle.net/hcvfC/1/

Answer 1

Here is my solution to the problem:

$(window).on('resize orientationchange', function (e) {
    if ($.datepicker._datepickerShowing) {
        var datepicker = $.datepicker._curInst;
        dpInput = datepicker.input;
        dpElem = datepicker.dpDiv;
        dpElem.position({
            my: 'left top',
            of: dpInput,
            at: 'left bottom'
        });
    }
});

Answer 2

Another option which doesn't trigger repositioning whenever the zoom or orientation is changed, in case the datepicker isn't always going to be triggered, is to reposition when focusing on an element with a datepicker attached:

// Add event handler when focused on an element with which has datepicker intialised
$('.hasDatepicker').on('focus', function() {

    // store the element for use inside the position function
    var $target = $(this);

    // get the elements datepicker widget object and set it's position based on the target element
    $target.datepicker('widget').position({

        my: 'left top',
        at: 'left bottom',
        of: $target
    });
});

This should work if you're using either the click to show datepicker or the button option.

Answer 3

Take care about using variable beginning with "_", it's suppose to be for private use only :)

My solution :

$(window).on('resize orientationchange', function(){
    var $elActive = $(document.activeElement);
    if( $elActive.is('.hasDatepicker') ){
        $elActive.datepicker('widget').position({
            my: 'left top',
            at: 'left bottom',
            of: $elActive
        });
    }
});