jQuery ui datepicker positioning problem when scrolling down webpage

Posted by Remnant on Stack Overflow See other posts from Stack Overflow or by Remnant
Published on 2010-05-14T14:24:39Z Indexed on 2010/05/14 15:14 UTC
Read the original article Hit count: 414

Filed under:
|
|

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)

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui