On our page we have a scrollable table with date input fields. However, whenever we scroll the table up and down and select date input field, the date picker pops up in the position where the table row would have started on the page(which would be obviously at the bottom with out scroll). So, often that is outside of the bounds of our scrollable table.

The Activity Date aka Due_Date__c datepicker shows at the bottom of the page outside of the scrollable table as show in the images. Can some one help with this pls.

<apex:page sidebar="false" controller="Test" standardStylesheets="true">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/JavaScript" />
    <style>
        .table-container {
            Width:  100.5%;
            height: 400px;
            border: 1px solid black;
            margin: 10px auto;
            background-color: #FFFFED;
            position: relative; /* or absolute */
            padding-top: 30px; /* matches height of header */
        }
        .table-container-inner {
            overflow-x: hidden;
            overflow-y: auto;
            height: 100%;
            Width:  auto;
        }
        .heading-bg {
            background-color: #66C87D;
            height: 30px; /* matches padding of table-container */
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            border-bottom: 1px solid black;
        }
        table {
            width: auto;
        }
        .heading {
            position: absolute;
            top: 0;
            font-weight: bold;
            text-align: center;
        }    
    </style>
    <apex:form id="formId">
        <apex:pageMessages id="msgId"/>
        <apex:pageBlock Title="Accounts List" mode="inlineEdit" id="acc_list" >
        <apex:pagemessages />
            <apex:pageBlockButtons >
                 <apex:commandButton action="{!Edit}" id="editButton" value="Edit"/>
                 <apex:commandButton action="{!save}" id="saveButton" value="Save"/>
                 <apex:commandButton action="{!cancel}" onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>
            </apex:pageBlockButtons>    
    <!-- ***Detail Mode*** -->            
            <apex:outputpanel rendered="{!view}" id="view">
                <apex:actionStatus id="loading" >
                    <apex:facet name="start" >
                      <center><img src="/img/loading32.gif" />      Loading....  Please Wait...  </center>          
                    </apex:facet>
                </apex:actionStatus>
                <div class="table-container">
                <div class="heading-bg"></div><div class="table-container-inner"> 
                        <table id="schTable" >
                            <thead><tr><td><div class="heading" style="width: 60px;word-wrap:break-word;">Activity Date</div></td></tr></thead>
                            <tbody>
                                <apex:repeat value="{!lstaAccs}" var="a"><tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                                <td><div style="width: 80px;word-wrap:break-word;">
                                   <apex:outputField value="{!a.Acc.Due_Date__c}" title="Due Date">
                                                <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton" event="ondblclick" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                                  </apex:outputField></div>
                                </td></tr></apex:repeat>
                            </tbody>
                        </table>
                    </div></div>
            </apex:outputpanel>                       
        </apex:pageBlock>
    </apex:form>
    <script>
        var $ = jQuery.noConflict();
         $(document).ready(function(){
          $("#toggleId").click(function(){
            $("#detailTblId").toggle();
            if($("#detailTblId").css('display')=='none'){
                $('#linkTextId').html('Click here to show the Contact information in the Tabular form.');
            }else{
                $('#linkTextId').html('Click here to Hide.');
            }
          });                                           
        }); </script> 
</apex:page>