Sticky issue on bootstrap datepicker

Question

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.

Answer 1

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);         }     });