jQuery Forum

Background

I have a webpage that uses multiple instances of the jQuery ui datepicker (UI/API/1.8/Datepicker). My webpage will display ~80 records which extends beyond a single screenshot. I populate the data using the following (asp.net mvc):
    <% 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:     

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. That is to say it is is positioned relative to the input box and in a consistent manner for any datepicker within the first screenshot.
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?

Further Notes

I have been researching this over the past two days but cannot solve the issue.

As far as I can tell this is a known bug (?) and having looked through these forums and other resources (google) I cannot find a satisfactory resolution to the problem.

Some forums I have visited have suggested that this issue has been resolved. Other have suggested code hacks which I have tried but without success, including:
Updating the custom css file that I downloaded with the datepicker e.g setting positioning properties.
Updating the jquery.ui.datepicker.js file directly e.g. the offset properties