positioning-problem-when-scrolling-down-webpage with j query pop up calendar

[newcf]

i have posted this again since the previous has been answered and beside, try to simplify the problem

I am trying a very simple code here by have so many break lines so i can scroll down to the page.  when i scroll down, click on the text box, the pop up calendar dosen't appear next to the text box, i appears all the way on the top.  is there the way to make the calendar appeas next to the text box.

<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="scripts/jquery-1.9.0.js"></script>
<script src="scripts/jquery-ui.js"></script>

<script>
    $(function() {

       $("#datepicker").datepicker({ minDate: 0 });

    });

</script>

<cfoutput> #repeatstring("<br>",100)# </cfoutput>
<cfform>
<cfinput type="text" value=""  id="datepicker" name="sale_date"  />

</cfform>

thanks

[Ashish_Todon]

Hi

you need to set position of datepicker please follow the link

http://stackoverflow.com/questions/3474018/how-to-set-the-show-position-of-datepicker

[newcf]

tried this but didn't work when scroll down to the bottom of the page.

<script>
    $(function() {

     $('.datetime').datepicker({
     dateFormat: 'm/d/yy',
     beforeShow: function (input, inst) {
         var offset = $(input).offset();
         var height = $(input).height();
         window.setTimeout(function () {
             inst.dpDiv.css({ top: (offset.top + height + 4) + 'px', left: offset.left + 'px' })
         }, 1);
     }

});
   

    });

</script>