+ Start a Discussion

VisualFoce Page Styling issue - Browser resizing and SalesForce Section graphics

Hello all,


I've been beating my head against the wall with this one for a while, hoping somebody out there can help. I have a simple page that lists out a set of cases related to a project (Project is a custom object). When this VisuaForce page displays if the browser window is maximized all looks great, but if the windows has been resized the fields on the right side of my datatable are rendering outside of the standard SalesForce section graphics.


See screen shot



Any suggestions?


VF Page


<apex:page standardController="Project_KA__c" showHeader="false" sidebar="false" extensions="CustomController" standardStylesheets="true"> <style type="text/css"> .dateFormat { display: none; } </style> <apex:form > <apex:pageBlock > <apex:pageBlockButtons > <apex:commandButton action="{!saveChanges}" value="Save Changes" rerender="AJAXTest" status="AJAXStatus" /> <apex:actionStatus startText="(Saving...)" stopText="" onStop="window.top.close();" ID="AJAXStatus" /> </apex:pageBlockButtons> <apex:pageBlockSection title="Quick edit case list"> <apex:dataTable value="{!relatedCases}" var="CC" styleClass="list"> <apex:column headerValue="Action"> <apex:commandLink value="View" action="{!viewCase}"> <apex:param name="caseId" value="{!CC.Id}"/> </apex:commandLink> </apex:column> <apex:column headerValue="Action"> <apex:commandLink value="Edit" action="{!editCase}"> <apex:param name="caseId" value="{!CC.Id}"/> </apex:commandLink> </apex:column> <apex:column headerValue="Case#"> <apex:inputField value="{!CC.CaseNumber}" /> </apex:column> <apex:column headerValue="Subject"> <apex:inputField value="{!CC.Subject}" /> </apex:column> <apex:column headerValue="Status"> <apex:inputField value="{!CC.Status}" /> </apex:column> <apex:column headerValue="Due Date"> <apex:inputField value="{!CC.Date_Du__c}" /> </apex:column> <apex:column headerValue="Internal Due Date"> <apex:inputField value="{!CC.Internal_Date_Due__c}" /> </apex:column> <apex:column headerValue="Case Owner"> <apex:inputField value="{!CC.OwnerID}" /> </apex:column> <apex:column headerValue="Internal Owner"> <apex:inputField value="{!CC.Internal_Owner__c}" /> </apex:column> <apex:column headerValue="Client Owner"> <apex:inputField value="{!CC.ContactID}" /> </apex:column> </apex:dataTable> </apex:pageBlockSection> </apex:pageBlock> <!-- <div style="float:left;width:73%"> --> <apex:detail id="caseDetail" subject="{!selectedCase.Id}" relatedList="false" title="false"/> <!-- </div> --> </apex:form> </apex:page>




Edwin VijayEdwin Vijay

Remove the Pageblocksection or close it immediately after opening...


Also, try using a pagebloacktable instead of datatable




Thanks for your quick reply, I tried both suggestions but neither worked.


Anybody have any other ideas??  This doesn't limit the functionality but its just sort of visually annoying.