jQuery ui datepicker positioning problem when scrolling down webpage
I have a webpage that uses multiple instances of the jQuery ui datepicker. My webpage will display ~80 records which extends beyond a single screenshot.

    <% foreach (var record in Model) { %>
        <div class="recordname"><%=record.name%></div>
        <%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" } )%>
        // <-- additional html here -->
    <% } %> 

I have set the defaults of my datepicker as follows:

        $(".date-pick").each(function() {
        $(this).datepicker({
            dateFormat: 'dd M yy',
            showOn: 'button',
            buttonImage: '/Images/datepickericon.png',
            buttonImageOnly: true
            });
        });

When the page first loads, if I click any datepicker icon that is visible on screen (*i.e. without scrolling*) then the datepicker appears as expected.

However, if I scroll down the page and then click a datepicker icon, the datepicker does not appear in the screen window but is instead rendered right back near the top of the screen.

Any ideas how to solve this?

I am using:

 - IE7
 - asp.net mvc
 - jquery.ui.datepicker.js (UI/API/1.8/Datepicker)


jQuery ui datepicker positioning problem when scrolling down webpage
===

I have a webpage that uses multiple instances of the jQuery ui datepicker. My webpage will display ~80 records which extends beyond a single screenshot.

    <% foreach (var record in Model) { %>
        <div class="recordname"><%=record.name%></div>
        <%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" } )%>
        // <-- additional html here -->
    <% } %> 

I have set the defaults of my datepicker as follows:

        $(".date-pick").each(function() {
        $(this).datepicker({
            dateFormat: 'dd M yy',
            showOn: 'button',
            buttonImage: '/Images/datepickericon.png',
            buttonImageOnly: true
            });
        });

When the page first loads, if I click any datepicker icon that is visible on screen (*i.e. without scrolling*) then the datepicker appears as expected.

However, if I scroll down the page and then click a datepicker icon, the datepicker does not appear in the screen window but is instead rendered right back near the top of the screen.

Any ideas how to solve this?

I am using:

 - IE7
 - asp.net mvc
 - jquery.ui.datepicker.js (UI/API/1.8/Datepicker)

