Sticky issue on bootstrap datepicker

Asked 7/8, 2017 at 6:31 Answered 30/5, 2018 at 11:38

css datepicker css-position sticky bootstrap-datepicker

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.

Ascendant answered 7/8, 2017 at 6:31 Comment(10)

Its probably because your datepicker-parent has style position: fixed. I think you should be able to work without it. – Bluepoint 7/8, 2017 at 6:43

But I want it to be sticky to top. – Ascendant 7/8, 2017 at 6:46

Can you please explain your problem? I checked with ipad but, didn't understand your issue. – Obla 10/8, 2017 at 13:17

@Ascendant 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. – Chronicle 17/8, 2017 at 12:14

Thanks I didnt knew that, but that didnt fixed the problem – Ascendant 18/8, 2017 at 4:47

@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. – Ascendant 18/8, 2017 at 4:48

@slaker i tested on safari on ipad – Ascendant 18/8, 2017 at 5:1

@Ascendant - Could you review my answer below and let me know if that helped? – Derinna 6/2, 2018 at 16:13

the link seems to be broken? – Hooper 28/5, 2018 at 14:40

@Ascendant the link is not working, If we are unable to see the problem, How we suppose to tell the solution? – Parthena 1/9, 2019 at 2:4

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

Fleisher answered 30/5, 2018 at 11:38 Comment(0)

Try this

.dropdown-menu{
position: fixed!important
}

Treasure answered 10/8, 2017 at 12:57 Comment(0)

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.

Zerla answered 10/8, 2017 at 17:8 Comment(1)

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, . – Ascendant 15/8, 2017 at 6:40

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

Eolande answered 17/8, 2017 at 10:56 Comment(3)

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 – Ascendant 18/8, 2017 at 4:55

let me check it – Eolande 18/8, 2017 at 4: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 – Eolande 18/8, 2017 at 4:59

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

.element{
position: sticky!important;
}

Neoarsphenamine answered 21/3, 2018 at 9:48 Comment(0)

-1

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

Derinna answered 6/2, 2018 at 0:14 Comment(1)

@Baum mit Augen - Thanks, I have tried to improve my answer. Please let me know if more needs to be done. – Derinna 6/2, 2018 at 0:26

Recommended topics

Hot tags