CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapdatepicker
zen_1991
zen_1991

Reputation: 629

Bootstrap Datepicker scrolling issue

Experiencing a strange scrolling issue on my website where the bootstrap datepicker calendar doesn't stay with the input box that its attached to. Tried my best to recreate it in a jsfiddle. (in the box scroll with your mouse wheel then click on the input box to view the calendar.) Im aware it doesnt appear in front but that isnt the issue, it was just for recreational purposes. You will notice that it doesn't scroll correctly with the input box which is what im trying to fix.

My original code was: 

 $(".datepicker-input").each(function(){ $(this).datepicker();});

HTML:

<input type="text" class="datepicker-input" />

Script:

    var datePicker = $().datepicker({});
    var t;
    $(window).on('DOMMouseScroll mousewheel scroll', function() {
        window.clearTimeout(t);
        t = window.setTimeout(function() {
            $('.datepicker-input').datepicker('place');
        }, 100);
    });

CSS:

html,body {
    overflow-x: hidden;
    position: relative;
    min-height: 100%;
}

.datepicker-input {
    margin-top: 250px;
    margin-left: 100px;
}

.dropdown-menu {
    font-size: 13px;
    margin-left: 20px;
}

Link to jsfiddle: http://jsfiddle.net/8C6jT/1/ (Thanks A. Wolff)

EDIT:

This function is some what effective in Chrome and IE.. it still causes the calendar to move away from the input box if you scroll too quickly but it doesn't work for Firefox.

Upvotes: 8

Views: 11912

Answers (3)

Vijay Dwivedi
Vijay Dwivedi

Reputation: 172

use your css like this..

html, body {
    overflow-x: hidden;
    position: fixed;
    min-height: 1000%;
}
.datepicker-input {
    margin-top: 250px;
    margin-left: 100px;
}
.dropdown-menu {
    font-size: 13px;
    margin-left: 20px;
}

Upvotes: 0

user3434437
user3434437

Reputation: 1

I dont know why, but positioning is based on scrolling so you need to find this code in bootstrap-datepicker.js

scrollTop = $(this.o.container).scrollTop();

and rewrite it to 

scrollTop = 0;

After that it will stay with input. Dont know if its the best solution, but using scroll events to fix it should not be the best because of cross browser and device support.

Upvotes: 0

user3692882
user3692882

Reputation: 1

Try this: 

html, body {
    position: relative;
    min-height: 1000%;
    height: auto;
}

Hope this will help

Upvotes: -1

Related Questions