jQuery ui datepicker positioning problem when scrolling down webpage
- by Remnant
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)
