CODEWITHSUNDEEP
jquery-ui
Keith K
Keith K

Reputation: 2953

jQuery DatePicker does not move with HTML content when in a scrollable div

I have form that has a restricted size and the overflow style set to scroll. This form contains many DatePickers. If I open one of DatePicker's then scroll the panel (with the scrollwheel which keeps the focus on the DatePicker so it stays open) the DatePicker does not move with the form field it is attached to. See my fully working example below:

<html>
  <head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
  </head>
  <body>
    <div style="width: 200px; height: 200px; overflow: scroll">
<script type="text/javascript">
  $(function() {  
    $('#datepicker').datepicker({   
       changeMonth: true, 
       changeYear: true, 
       showOn: 'button', 
       changeMonth: true, 
       changeYear: true, 
       buttonImageOnly: true, 
       dateFormat: 'dd M yy', 
       buttonText: 'Click'   
    });
  });
</script>
      <div class="demo">
        <p>Date: 
          <input type="text" id="datepicker">
        </p>
      </div>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
    </div>
  </body>
</html>

Currently the datepicker is fixed in place relative to the browser window not the trigger input field. Can anyone help me keep the DatePicker control open and in the same place relative to its trigger input field when the form is scrolled?

Thanks

Edit: Clarified the Title and situation explaination.

Edit: fixed the summary text

Upvotes: 2

Views: 4715

Answers (2)

Keith K
Keith K

Reputation: 2953

The full solution used is:

var dtPckr = $('#datepicker')

$(".demo").scroll(function() {
  dtPckr.datepicker('hide');
});

$(window).resize(function() {
  dtPckr.datepicker('hide');
});

This extendes the solution posted by Nick C by adding the window resize handler to hide the datepicker. This should cover all cases when the content will move in relation to the displayed datepicker.

Upvotes: 3

Nick Craver
Nick Craver

Reputation: 630379

The datepicker is attached to a container, the body element in all cases as of the 1.7.2 widget. Unfortunately this means no, it's not a fixable issue in a scrolling div. This came up on the jQuery groups mailing list a while back.

An alternative would be to close the date picker when you scroll the div so there's at least no visual artifact going on:

$(".demo").scroll(function() {
  $('#datepicker').datepicker('hide');
});

Upvotes: 1

Related Questions