Home/ Questions/Q 583041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T14:45:03+00:00

I have form that has a restricted size and the overflow style set to

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0