+ Start a Discussion
DJP1SDJP1S 

DatePicker gets rendered far away from field. Weird.

This happening in Mozilla nad Chrome. Basically, I've got a visualforce page that renders a form. I've got the form in a section on the page layout. I've got the buttons up top fixed so the form scrolls behind the row of buttons. Once I implemented this functionality, whenever they go to modify a date, the datepicker renders hundreds of pixels below the field they clicked. What's up with that? 

 

The problem field is here :

<b>Due: &nbsp;</b> <apex:inputField value="{!n.ptask.Due__c}" style="width:80px"/>

 

<apex:page standardcontroller="Page1Project__c" extensions="ProjectNotes" doctype="html-5.0"
    action="{!allTaskNotes}" title="ProjectNotes">
    <style type="text/css">
        .lAlign
        {
            padding-left: 4px;
        }
        .panelStyle
        {
            font-family: arial;
            font-size: 9pt;
            color: #484848;
        }
        .bold
        {
            font-weight: bold;
        }
        .right
        {
            text-align: right;
        }
        .left
        {
            text-align: left;
        }
        .loadStyle
        {
            font-weight: bold;
            color: purple;
        }
        .updateStyle
        {
            color: blue;
        }
        .cke_skin_kama .cke_contents iframe
        {
            min-height: 800px;
        }   
        .floatingStyle 
        { 
            position:relative; 
        } 
        .tableContainer
        {
            height:680px; 
            width: 100%;
            overflow: auto;
        } 
    </style>

    <script>
        function setFocusOnLoad() {
        }
    </script>
    
    <!-- Add the javascript file to intialize the CkEditor -->
<apex:includescript value="{!URLFOR($Resource.CkEditor, 'ckeditor/ckeditor.js')}" />
<script type="text/javascript">
    CKEDITOR.config.height = '100px';
    CKEDITOR.config.scayt_autoStartup = true;
    CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
</script>

<apex:actionstatus id="save">
                    <apex:facet name="start">
                        <div class="waitingSearchDiv" id="el_loading" style="background-color:#fbfbfb; height:100%; opacity:0.65; width:100%;"> 
                            <div class="waitingHolder" style="top: 84px; width: 91px;">
                                <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                                <span class="waitingDescription">Saving...</span>
                            </div>
                        </div>
                    </apex:facet>
                </apex:actionstatus>
<apex:form >

 
           <div id="buttonsTop">
            
              <apex:commandButton id="switchc" value="Collapse All" action="{!getNotesSwitch}" rendered="{!IF(getNotes==true, true, false)}"/>
              <apex:commandButton id="switchu" value="Uncollapse All" action="{!getNotesSwitch}" rendered="{!IF(getNotes==false, true, false)}"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <apex:commandButton id="saveButton" accesskey="x" value="Save" action="{!updateRecords}" status="save"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <apex:commandButton id="createButtonSEO" value="Create SEO Recommendation" action="{!seoRecommendation}" status="Create" rendered="{!IF(projectType.Name=='SEO Recommendations', true, false)}"/>
            <apex:commandButton id="createButton" value="Create" action="{!CreateTask}" status="Create"  
            rendered="{!IF(projectType.Name!='SEO Recommendations' && projectType.Name!='Design Recommendations' && projectType.Name!='PPC Recommendations' && projectType.Name!='Social Media Recommendations' && projectType.Name!='Writing Recommendations' , true, false)}"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <apex:actionstatus id="Create">
                    <apex:facet name="start">
                        <div class="waitingSearchDiv" id="el_loading" style="background-color:#fbfbfb; height:100%; opacity:0.65; width:100%;"> 
                            <div class="waitingHolder" style="top: 84px; width: 91px;">
                                <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                                <span class="waitingDescription">Creating a New Task and Note...</span>
                            </div>
                        </div>
                    </apex:facet>
                </apex:actionstatus>
            <apex:commandButton id="reseqButton" value="Resequence Tasks" action="{!reSeq}" status="seq" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <apex:actionstatus id="seq">
                    <apex:facet name="start">
                        <div class="waitingSearchDiv" id="el_loading" style="background-color:#fbfbfb; height:100%; opacity:0.65; width:100%;"> 
                            <div class="waitingHolder" style="top: 84px; width: 91px;">
                                <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                                <span class="waitingDescription">Resequencing...</span>
                            </div>
                        </div>
                    </apex:facet>
                </apex:actionstatus>
             <apex:commandButton id="deleteButton" value="Delete Selected Tasks and Notes" action="{!deleteSelectedTasks}" status="delete"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <apex:actionstatus id="delete">
                    <apex:facet name="start">
                        <div class="waitingSearchDiv" id="el_loading" style="background-color:#fbfbfb; height:100%; opacity:0.65; width:100%;"> 
                            <div class="waitingHolder" style="top: 84px; width: 91px;">
                                <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                                <span class="waitingDescription">Updating and Deleting...</span>
                            </div>
                        </div>
                    </apex:facet>
                </apex:actionstatus> 
              <apex:commandButton id="noteButton" value="New Task Note for Selected Tasks" action="{!noteForSelected}" status="note"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <apex:actionstatus id="note">
                    <apex:facet name="start">
                        <div class="waitingSearchDiv" id="el_loading" style="background-color:#fbfbfb; height:100%; opacity:0.65; width:100%;"> 
                            <div class="waitingHolder" style="top: 84px; width: 91px;">
                                <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                                <span class="waitingDescription">Creating new Task Note...</span>
                            </div>
                        </div>
                    </apex:facet>
                </apex:actionstatus> 
                
                  <br/>
              </div>
              <apex:pageMessage rendered="{!errorFound}" summary="{!errorMessage}" severity="{!errorSeverity}" strength="2"/> 
     <apex:pageBlock >
        <apex:outputPanel styleClass="tableContainer" layout="block">
    <apex:dataTable id="resultsTask"  value="{!wrapout}" var="n">
              <apex:column style="border-bottom: solid #A3D1FF;" id="kadabra">
                   <apex:panelGrid id="taskPane" columns="10" styleClass="panelStyle" columnClasses="right bold, left"  cellPadding="0px" style="float:left;">
                    
                    <apex:outputpanel id="minus">
                    <apex:commandLink value="+" rendered="{!IF(n.collapsed==true, true, false)}" action="{!uncollapse}" styleClass="btn" style="text-decoration: none;"> 
                               <apex:param name="uncollapseParam" value="{!n.ptask.Id}" assignTo="{!tc}"/>
                          </apex:commandLink>
                      <apex:commandLink value="-" rendered="{!IF(n.collapsed==false, true, false)}" action="{!collapse}" styleClass="btn" style="text-decoration: none;">
                           <apex:param name="collapseParam" value="{!n.ptask.Id}" assignTo="{!tc}"/>
                        </apex:commandLink>
                    </apex:outputPanel>
                    <b>Seq: </b> <apex:inputText value="{!n.ptask.Seq__c}" style="width:30px" />
                    
                    <b>Description: </b> <apex:inputField value="{!n.ptask.Name}" style="width:500px"/>
                    
                    <b>Priority: </b> <apex:inputField value="{!n.ptask.Priority__c}" style="width:120px"/>
                    
                    <apex:outputLink value="https://page1solutions.my.salesforce.com/{!n.ptask.Id}" target="_blank">Task View</apex:outputLink> 
                    </apex:panelGrid>
                    <apex:panelGrid columns="12" styleClass="panelStyle" columnClasses="right bold, left"  cellPadding="0px" style="float:left;">
                    <b>Assigned To: </b> <apex:inputField value="{!n.ptask.Assigned_To__c}" style="width:120px"/>
                    
                    <b>Quant: &nbsp;</b> <apex:inputField value="{!n.ptask.Quantity__c}" style="width:30px"/>
                    
                    <b>Due: &nbsp;</b> <apex:inputField value="{!n.ptask.Due__c}" style="width:80px"/>
                     
                    <apex:outputLabel value="Status: " style="background-color:{!CASE(n.ptask.Status__c, '6) Completed', '#A7ED87', '4) On Hold', '#5C98FF', '5) Deferred', '#5C98FF', '2) Ready', '#FDFF5C', '3) Active', '#FDFF5C', '1) Not Started', '#EA5D61', 'none')}"/> <apex:inputField value="{!n.ptask.Status__c}" style="width:120px"/>
                    
                    <b>Task Select</b> <apex:inputCheckbox value="{!n.selected}">
                                        </apex:inputCheckbox>
                    <b>Complete?</b> <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                                        <apex:param value="{!n.ptask.Completed__c}" /> 
                                    </apex:outputText>
                    
                </apex:panelGrid>
                
    <apex:pageBlockTable id="inlinetablesec" value="{!n.ntes}" var="wo" >
           <apex:column >
                <apex:panelGrid columns="2" styleClass="panelStyle" columnClasses="right bold, left"  cellPadding="2px" style="float:left;">
                    <apex:outputLabel value="Note Type: "/>
                    <apex:outputField value="{!wo.Nte.Note_Type__c}"/>
                                                                        
                    <apex:outputLabel value="Quick Link: "/> 
                    <apex:outputLink value="https://page1solutions.my.salesforce.com/{!wo.Nte.Id}" target="_blank">{!wo.Nte.Name}</apex:outputLink>  
                                    
                </apex:panelGrid>
                <apex:panelGrid columns="2" styleClass="panelStyle" columnClasses="right bold, left" cellPadding="2px" style="float:left; max-width:50%; padding-left:14px;">    
                                                                                
                    <apex:outputLabel value="Importance: "/>
                    <apex:outputField value="{!wo.Nte.Important__c}"/> 
                    
                    <apex:outputLabel value="Created By: "/>
                    <apex:outputField value="{!wo.Nte.CreatedBy.Name}"/>
                        
                </apex:panelGrid>
                <apex:panelGrid columns="2" styleClass="panelStyle" columnClasses="right bold, left" cellPadding="2px" style="float:left; max-width:50%; padding-left:5px;">    
                    
                    <apex:outputLabel value="Archived?"/>                                    
                    <apex:outputField value="{!wo.NTE.Archived__c}"/>
                    
                    <apex:outputLabel value="Created On: "/>                                    
                    <apex:outputText value="{!wo.Nte.DOW_Created__c}, {!wo.Nte.CreatedDate}"/>
                    
                </apex:panelGrid>
                    <br/><br/>
                    <br/><br/>
                <apex:outputPanel rendered="{!IF(wo.Nte.Project__r.Project_Type__r.Name=='SEO Recommendations', true, false)}">
                <div class="lAlign" columns="2" styleClass="panelStyle" columnClasses="right bold, left" >
                    <b><apex:outputText value="Prompt: "/></b>           
                    <apex:outputText value="{!wo.Nte.Prompt__c}" style="height:12px"/>
                </div>
                </apex:outputPanel>
                <apex:outputPanel style="height:10px">
                    <apex:variable value="{!0}" var="rowNum"/>
                <div class="lAlign" >
                    <apex:inputtextarea value="{!wo.Nte.Note__c}" styleClass="ckeditor" richtext="false"/>
                </div>
                </apex:outputPanel>
                     
           </apex:column>  
           
           <apex:inlineEditSupport event="onClick"  />
        </apex:pageBlockTable>                       
           
               </apex:column> 
               
            </apex:dataTable>
            
        </apex:outputPanel>
    </apex:pageBlock> 
            </apex:form>
</apex:page>