Apex Code Development You need to sign in to do that
Don't have an account?
DJP1S 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: </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)}"/>
<apex:commandButton id="saveButton" accesskey="x" value="Save" action="{!updateRecords}" status="save"/>
<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)}"/>
<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" />
<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" />
<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" />
<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: </b> <apex:inputField value="{!n.ptask.Quantity__c}" style="width:30px"/>
<b>Due: </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>