jQuery datepicker causes page overflow

Question

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 ?

Answer 1

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