+ Start a Discussion
NuDevNuDev 

Field alignment in grid

I'm attempting to create a custom grid to display values from a single object record.  The page will be use in both View and Edit modes, and looks OK when in Edit mode (displaying inputFields).  I have yet to find a good option to keep the alignment consistent when simply viewing the data in a read-only state.  In this mode, I'd like to use outputField to retain the correct formatting of data. 

 

Here are some screens.  It's probably difficult to see, but the row/column headers (Type 1, Type 2... Count 1, Amount 1..) are being rendered as Labels. I'd like to keep the formatting the same here as on standard field labels.


1:  Edit mode, no issues.

 

2: View mode, obvious alignment issues:

 

MrTheTylerMrTheTyler

Post your vforce code so we can have a look.

NuDevNuDev

Here's a snippit including buttons, dropdown, top-level labels and the first row of data:

 

 

<apex:page standardController="CustomObject__c" extensions="extCustomObject" tabstyle="MyObject">
<apex:form id="myForm">
<apex:pageBlock title="Single Field Add/Edit" id="mainPageBlock" >
<apex:pageBlockButtons >
<apex:commandButton value="Delete" />
<apex:commandButton value="Edit" action="{!editThis}" rendered="{!isReadOnly}"/>
<apex:commandButton value="Save" action="{!save}" rendered="{!NOT(isReadOnly)}" />
<apex:commandButton value="Re-Calc" action="{!recalculateTotals}" />
<apex:commandButton value="Copy" />
<apex:commandButton value="Cancel" action="{!cancel}" />
</apex:pageBlockButtons>

<apex:panelGrid columns="5" width="100%">
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel style="white-space:nowrap;">Selectvalue</apex:outputLabel>
<apex:selectList multiselect="false" id="valueNumber" value="{!currentValue}" size="1" disabled="{!isReadOnly}">
<apex:selectOptions value="{!valueList}" />
</apex:selectList>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
</apex:pageBlockSectionItem>
</apex:pageBlockSection>

<!-- X-Axis Labels -->
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel ></apex:outputLabel>
<apex:outputText value="" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel style="white-space:nowrap;text-align: right;" >Type 1</apex:outputLabel>
<apex:outputText value="" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>

<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel style="white-space:nowrap;text-align: right;">Type 2</apex:outputLabel>
<apex:outputText value="" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>

<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel style="white-space:nowrap;text-align: right;">Type 3</apex:outputLabel>
<apex:outputText value="" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>

<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel style="white-space:nowrap;text-align: right;">Type 4</apex:outputLabel>
<apex:outputText value="" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>

<!-- Y-Axis Labels, Data -->
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel style="white-space:nowrap;">Count 1</apex:outputLabel>
<apex:outputText value=""/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>

<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:inputField value="{!thisObject.Field1__c}" rendered="{!NOT(isReadOnly)}"/>
<apex:outputField value="{!thisObject.Field1__c}" rendered="{!isReadOnly}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:inputField value="{!thisObject.Field2__c}" rendered="{!NOT(isReadOnly)}"/>
<apex:outputField value="{!thisObject.Field2__c}" rendered="{!isReadOnly}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:inputField value="{!thisObject.Field3__c}" rendered="{!NOT(isReadOnly)}"/>
<apex:outputField value="{!thisObject.Field3__c}" rendered="{!isReadOnly}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:inputField value="{!thisObject.Field4__c}" rendered="{!NOT(isReadOnly)}"/>
<apex:outputField value="{!thisObject.Field4__c}" rendered="{!isReadOnly}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>