Sticky issue on bootstrap datepicker

user_1247487 0
Viewed 4603

I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on testing it on Ipad and Iphone (not tested on andriod devices yet), when I scroll down and try to touch the datepicker to open it , it scrolls back to the top of the page, how can I fix this issue?

Similar problem arises when I am using a custom dropdown Selectric

I have created a simple striped down version of the problem here. Note that the problem wont replicate on emulator but on an actual mobile device or ipad.

bootstrap-datepicker css-position sticky datepicker css
6 Answers

I also faced same issue and resolved it as below solution , you can try it. datepicker has beforeShow property where you have to set calendar position.

  $("#EffectiveDateAccept").datepicker({
        changeMonth: true,
        changeYear: true,
        // minDate: 0,
        dateFormat: 'mm/dd/yy',
        beforeShow: function (input, inst) {
            var calendar = inst.dpDiv;
            setTimeout(function () {
                calendar.position({
                    my: 'center bottom',
                    at: 'top',
                    collision: 'none',
                    of: input
                });
            }, 1);
        }
    });
user_97796680

As a start, have you looked thru the GH repo's issues for something matching your description?

This link specifically sounds promising:

I think what might be occurring is that your datepicker is set to absolute of the body, not the parent you are setting as "fixed".

So when you click to open the datepicker, your mobile device is scrolling you to the active element (in this case, the datepicker at the top, set to absolute on the parent).

Also there seems to be some default mobile behavior related to scrolling:

Perhaps setting the following will help:

-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */

The following link provides more context on this scrolling behavior:

user_42407340
Related