I am using the datepicker control from jQuery-ui 1.8. from-date is a text input. I am attaching a very simple datepicker:

$('#from-date').datepicker();

This causes the page to overflow (vertical scrollbar), which I am trying to avoid. As soon as I click the from-date, the datepicker control appears, and the scrollbar dissapears. After dismissing the datepicker, the scrollbar doesn't appear anymore.

The text field is inside a div that has overflow:auto and a fixed height and width. I suspect it's a z-index issue.

What am I doing wrong ? How would I debug this ?

I am using the datepicker control from jQuery-ui 1.8. from-date is a text input. I am attaching a very simple datepicker:

$('#from-date').datepicker();

This causes the page to overflow (vertical scrollbar), which I am trying to avoid. As soon as I click the from-date, the datepicker control appears, and the scrollbar dissapears. After dismissing the datepicker, the scrollbar doesn't appear anymore.

The text field is inside a div that has overflow:auto and a fixed height and width. I suspect it's a z-index issue.

What am I doing wrong ? How would I debug this ?

• javascript
• jquery
• scrollbar
• overflow

Share Improve this question Follow asked Apr 22, 2010 at 16:20 nc3bnc3b 16.3k55 gold badges5353 silver badges6363 bronze badges 3

• How about using $("body").css("overflow", "hidden"); to prevent the page from scrolling, if you never want it to scroll? Also, have you tested on multiple browsers? – Adam Commented Apr 22, 2010 at 16:27
• In the end I will set the overflow to hidden for the entire body, but I would like to do so as a failsafe. First I need to find out why this is happening. EDIT: This happens in firefox 3.6.3, iexplore 8, opera 10.50 – nc3b Commented Apr 22, 2010 at 16:28
• Maybe it would be easier to help if you provided the page? – SamB Commented Apr 23, 2010 at 0:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I had exactly the same problem. Wrapping Datepicker into a new div with a fixed position after the document is ready worked for me:

$(document).ready(function() {
    // ...
    $("#ui-datepicker-div").wrap('<div style="position:absolute;top:0px;"></div>');
}