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.

Its probably because your `datepicker-parent` has style `position: fixed`. I think you should be able to work without it. — Nisarg Shah, Aug 07 '17 at 06:43
Can you please explain your problem? I checked with ipad but, didn't understand your issue. — , Aug 10 '17 at 13:17
@UmeRonaldo you are using an old version of the bootstrap datepicker. open its JavaScript file, it was created in 2012, try using the latest version from their github. — Muhammad, Aug 17 '17 at 12:14
@slacker, On any tablet (i tested ipad) or phones , scroll down to the bottom of the page and try opening the datepicker, it will open but will run back to the top of the page. — UmeRonaldo, Aug 18 '17 at 04:48
@UmeRonaldo - Could you review my answer below and let me know if that helped? — prufrofro, Feb 06 '18 at 16:13
@UmeRonaldo the link is not working, If we are unable to see the problem, How we suppose to tell the solution? — Hassan Siddiqui, Sep 01 '19 at 02:04

score 1 · Answer 1 · answered May 30 '18 at 11:38

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

score 0 · Answer 2 · answered Aug 10 '17 at 12:57

0

Try this

.dropdown-menu{
position: fixed!important
}

answered Aug 10 '17 at 12:57

Bhushan wagh

187
1
14

score 0 · Answer 3 · answered Aug 10 '17 at 17:08

This issue is found unrelated to specific environment (not iOS only) and has a solution as follows:

You should find out which datepicker div class sets datepicker actually from hidden to visible (which of them change upon successful show and hide event).

Add to your css for that class (here modal-open) the missing show command:

body.modal-open {
    overflow: visible;
}

Now the scroll should stay in place.

Example refers to html like:

<body>
      <div class="modal-open">
            Datepicker
      </div>
</body>

Source:

Bootstrap modal: background jumps to top on toggle

PS. My source has also 18 other options, if this seems too hacky.

I have made this current one once, worked like charm and was not so tricky to do.

There is no class attached to body when the datepicker opens, it works by appending a set of html at the end of body and no style changes to body, . — UmeRonaldo, Aug 15 '17 at 06:40

score 0 · Answer 4 · edited Jun 04 '18 at 18:56

0

If you view it in Inspect Element, it's creating a separate DIV in HTML which has position absolute. Just change that position to sticky. That's why that happens. See in the image.

You can do this by adding this line of CSS code:

.dropdown-menu {
  position: sticky;
}

Hope that will help you

edited Jun 04 '18 at 18:56

Worthwelle

1,244
1
16
19

answered Aug 17 '17 at 10:56

Yaseen Ahmad

1,807
5
25
43

Tried it now , but problem not solved, I have tried it on the parent datepicker-parent too. both new tests are uploaded with the name test2.html and test3.html – UmeRonaldo Aug 18 '17 at 04:55
let me check it – Yaseen Ahmad Aug 18 '17 at 04:55
are you want to set it at the top? if you want it then you need to add JavaScript when you scroll then you add these css to date picker div let me know if you can't do it – Yaseen Ahmad Aug 18 '17 at 04:59

score 0 · Answer 5 · answered Mar 21 '18 at 09:48

0

just add This CSS code to your site it will fix that issue.

.element{
position: sticky!important;
}

answered Mar 21 '18 at 09:48

MOHIN

1
1
2

prufrofro · Answer 6 · 2018-02-06T00:25:37.937

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

This link specifically sounds promising:

https://github.com/uxsolutions/bootstrap-datepicker/issues/1866

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:

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Perhaps setting the following will help:

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

The following link provides more context on this scrolling behavior:

https://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content

@Baum mit Augen - Thanks, I have tried to improve my answer. Please let me know if more needs to be done. — prufrofro, Feb 06 '18 at 00:26

Sticky issue on bootstrap datepicker

6 Answers6