title: jQuery ui datepicker positioning problem when scrolling down webpage
body: <p>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.</p>
  
  <pre><code>&lt;% foreach (var record in Model) { %&gt;
      &lt;div class="recordname"&gt;&lt;%=record.name%&gt;&lt;/div&gt;
      &lt;%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" } )%&gt;
      // &lt;-- additional html here --&gt;
  &lt;% } %&gt; 
  </code></pre>
  
  <p>I have set the defaults of my datepicker as follows:</p>
  
  <pre><code>    $(".date-pick").each(function() {
      $(this).datepicker({
          dateFormat: 'dd M yy',
          showOn: 'button',
          buttonImage: '/Images/datepickericon.png',
          buttonImageOnly: true
          });
      });
  </code></pre>
  
  <p>When the page first loads, if I click any datepicker icon that is visible on screen (<em>i.e. without scrolling</em>) then the datepicker appears as expected.</p>
  
  <p>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.</p>
  
  <p>Any ideas how to solve this?</p>
  
  <p>I am using:</p>
  
  <ul>
  <li>IE7</li>
  <li>asp.net mvc</li>
  <li>jquery.ui.datepicker.js (UI/API/1.8/Datepicker)</li>
  </ul>