function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SATHISH REDDY.SATHISH REDDY. 

Datepicker position issue

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.
Ignore other fields that you see except for the Activity Date field where Activity Date is an outputfield with inline edit enabled and i do not see the date picker right below the selected row
continue: this is where the date picker shows at the bottom of the scrollable table.
<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>

 
Rakesh Thota 15Rakesh Thota 15
Hi Sathish,

I have faced the same issue, date picker is displayed below the Modal window, The reason for this issue is Z-Index for Modal window is higher then the Z-Index of SF date picker. The solution for this issue is include the SF date picker class in your page and increase the Z-Index to 9999 which is more then the Modal window Z-Index.

Refer the same code below:
<apex:page>
<style type="text/css">
.datePicker {
    z-index: 9999;/*Changed this css property which was 100 prior*/
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 17em;
    background-color: #b7c6b2;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    margin: 0;
    padding: 1px 1px 2px 2px;
}
</style>
<div class="popup">
<apex:inputfield value="{!AnyDateField}"/>
</div>
</apex:page>

Hope this code will help you to fix your issue.
make it as solved if its works for you.

Best Regards,
Rakesh Thota.