9

I have a pageblocksection with 4 columns where the spacing between 3rd and 4th is not equal.How to fix the spacing between columns.

<apex:page standardController="Account">
   <apex:form >
      <apex:pageBlock title="My Block"> 
           <apex:pageBlockSection title="My Section" columns="4" collapsible="false">
                <apex:outputField value="{!Account.Field1__c}"/>
                <apex:outputField value="{!Account.Field2__c}"/>
                <apex:outputField value="{!Account.Field3__c}"/>
                <apex:outputField value="{!Account.Field4__c}"/>
                <apex:outputField value="{!Account.Field5__c}"/>
                <apex:outputField value="{!Account.Field6__c}"/>
                <apex:outputField value="{!Account.Field7__c}"/>
                <apex:outputField value="{!Account.Field8__c}"/>
              </apex:pageBlockSection> 
         </apex:pageBlock> 
  </apex:form>

9

You'll find that it's not recommended to use PageBlockSection with more than two columns. You may be better off writing your own HTML as you'll be able to style it more precisely.

"Salesforce stylesheets are optimized for either one or two columns." ( https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlockSection.htm )

2

Another method is to create a table (as many columns as needed). Embed a pageBlockSection columns="1" within each table column.

This still compressed the labels a little, so I used styling as well. This example simulates 3 columns:

    <apex:page ...>

    <style type="text/css">
    .labelCol.vfLabelColTextWrap.first.last {
    white-space: nowrap;
    }
    </style>

    <table width="100%">
        <tr><td width="34%">
            <apex:pageBlockSection columns="1" ...>
        </td><td width="33%">
            <apex:pageBlockSection columns="1" ...>
        </td><td width="33%">
            <apex:pageBlockSection columns="1" ...>
        </td></tr>
    </table>

... and an added benefit of utilizing a table with 2 pageBlockSections is that the code looks nicer with the data from the left side and the right side separated.

1

Thanks @mrBlaQ.Here is my solution.

<apex:page standardController="Account">
   <apex:form >
        <table width="100%">
               <tr>
                <td>
                <apex:outputLabel value="Field1" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field1__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field2" style="font-weight:bold"/>
                &nbsp;&nbsp;
                 <apex:outputField value="{!Account.Field2__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field3" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field3__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field4" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field4__c}"/>
                </td>
               </tr>
               <tr>
               <td>
               <apex:outputLabel value="Field5" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field5__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field6" style="font-weight:bold"/>
                &nbsp;&nbsp;
                 <apex:outputField value="{!Account.Field6__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field7" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field7__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field8" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field8__c}"/>
                </td>
               </tr>
              </table> 
          </apex:form> 
 </apex:page>
1
  • hi. I have similar kind of code but i have a very huge code. I want to adjust the width of columns . I am using page block in which i have many page block sections. for One page block section i hv 5 columns. How to adjust the width? Last 3 columns are very conjusted while first 2 are taking lot of space . Please guide. – user12051 Mar 23 '15 at 10:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.