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
kiran2000kiran2000 

Fix spacing between columns in pageblocksection

Spacing between columns is not uniform.How to fix spacing

<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>
krprkrpr
try using PageBlockSectionItem.

For example : 

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockButtons>
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>

            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Account Name" for="account__name"/>
                    <apex:inputText value="{!account.name}" id="account__name"/>
                </apex:pageBlockSectionItem>

                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Account Site" for="account__site"/>
                    <apex:inputText value="{!account.site}" id="account__site"/>
                </apex:pageBlockSectionItem>

                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Account Type" for="account__type"/>
                    <apex:inputText value="{!account.type}" id="account__type"/>
                </apex:pageBlockSectionItem>

                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Account Number" for="account__number"/>
                    <apex:inputText value="{!account.accountNumber}" id="account__number"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
kiran2000kiran2000
Thanks krpr.I have tried using pageblocksectionitem and have same issue with spacing between columns.FYI ..I have 4 columns on my pageblocksection
dev_sfdc1dev_sfdc1
Hi Kiran,

Try using table tag,

<table style="width:1000px;">
<tr>
     <td style="text-align:right"><apex:outputlabel value="Name" style="width:200px;"></apex:outputlabel></td>
     <td> <span style="margin-left:20px"> </span> <apex:outputField value="{!Account.Field1__c}" style="width:160px" />
     </td>
              
     <td style="text-align:right"> <apex:outputlabel value="Contact Number" style="width:200px;"> </apex:outputlabe></td>
     <td><span style="margin-left:20px"></span> <apex:outputField value="{!Account.Field2__c}" style="width:160px"/>
     </td> 
      
</tr>
<tr>
     <td style="text-align:right"><apex:outputlabel value="Name" style="width:200px;"></apex:outputlabel></td>
     <td> <span style="margin-left:20px"> </span> <apex:outputField value="{!Account.Field3__c}" style="width:160px" />
     </td>
              
     <td style="text-align:right"> <apex:outputlabel value="Contact Number" style="width:200px;"> </apex:outputlabe></td>
     <td><span style="margin-left:20px"></span> <apex:outputField value="{!Account.Field4__c}" style="width:160px"/>
     </td> 
      
</tr>
</table>


If this helps you, please mark it as a solution.
thank you.
praveen murugesanpraveen murugesan
Hi,

You can use margin-left = Negative value

Eg:

style="margin-left:-10px;width:200px;"