function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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>