Hi
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