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
Sai Kethu 2Sai Kethu 2 

4 columns in Edit/Create page

I'm trying to create a VF page which needs to have a 4 column section, I have tried HTML code and regular VF code but no help, can anyone of you help me?

VF Code:
            <apex:pageBlockSection title="Fee Based Wealth Management Production - Annual"  >
            
            <apex:pageBlockSectionItem dataStyle="width:10%" labelStyle="width:23%" >
            <apex:outputLabel style="font-weight:bold">Field1</apex:outputLabel>
            <apex:inputField value="{!COntact.Field1__c}" style="width:80px"/>
            </apex:pageBlockSectionItem>
            
            <apex:pageBlockSectionItem dataStyle="width:10%" labelStyle="width:23%" >
            <apex:outputLabel style="font-weight:bold">Field2</apex:outputLabel>
            <apex:inputField value="{!Contact.Field2__c}" style="width:80px"/>
            </apex:pageBlockSectionItem>
            
            <apex:pageBlockSectionItem dataStyle="width:20%" labelStyle="width:23%" >
            <apex:outputLabel style="font-weight:bold">Field3</apex:outputLabel>
            <apex:inputField value="{!BAQ__c.Field3__c}" style="width:80px"/>
            </apex:pageBlockSectionItem>
            
            <apex:pageBlockSectionItem dataStyle="width:20%" labelStyle="width:23%" >
            <apex:outputLabel style="font-weight:bold">Field4</apex:outputLabel>
            <apex:inputField value="{!Contact.Field4__c}" style="width:80px"/>
            </apex:pageBlockSectionItem>  
           </apex:pageBlockSection>

HTML Code:
<table style="width:1000px;">
<tr>
     <td style="text-align:right"><apex:outputlabel value="Field1" style="margin-left:-10px;width:200px;"></apex:outputlabel></td>
     <td> <span style="margin-left:20px"> </span> <apex:inputField value="{!Contact.Field1__c}" label="" style="width:160px" />
     </td>
              
     <td style="text-align:right"> <apex:outputlabel value="Field2" style="width:200px;"> </apex:outputlabel></td>
     <td><span style="margin-left:20px"></span> <apex:inputField value="{!Contact.Field2__c}" label="" style="width:160px"/>
     </td> 
      

     <td style="text-align:right"><apex:outputlabel value="Field3" style="width:200px;"></apex:outputlabel></td>
     <td> <span style="margin-left:20px"> </span> <apex:inputField value="{!Contact.Field3__c}" label="" style="width:160px" />
     </td>
              
     <td style="text-align:right"> <apex:outputlabel value="Field4" style="width:200px;"> </apex:outputlabel></td>
     <td><span style="margin-left:20px"></span> <apex:inputField value="{!Contact.Field4__c}" label="" style="width:160px"/>
     </td> 
      
</tr>
</table>
SAHG-SFDCSAHG-SFDC
I Think should give columns="4"
SAHG-SFDCSAHG-SFDC
<apex:pageBlockSection title="Fee Based Wealth Management Production - Annual"  columns ="4" >
            
            <apex:pageBlockSectionItem dataStyle="width:10%" labelStyle="width:23%" >
            <apex:outputLabel style="font-weight:bold">Field1</apex:outputLabel>
            <apex:inputField value="{!COntact.Field1__c}" style="width:80px"/>
            </apex:pageBlockSectionItem>
            
            <apex:pageBlockSectionItem dataStyle="width:10%" labelStyle="width:23%" >
            <apex:outputLabel style="font-weight:bold">Field2</apex:outputLabel>
            <apex:inputField value="{!Contact.Field2__c}" style="width:80px"/>
            </apex:pageBlockSectionItem>
            
            <apex:pageBlockSectionItem dataStyle="width:20%" labelStyle="width:23%" >
            <apex:outputLabel style="font-weight:bold">Field3</apex:outputLabel>
            <apex:inputField value="{!BAQ__c.Field3__c}" style="width:80px"/>
            </apex:pageBlockSectionItem>
            
            <apex:pageBlockSectionItem dataStyle="width:20%" labelStyle="width:23%" >
            <apex:outputLabel style="font-weight:bold">Field4</apex:outputLabel>
            <apex:inputField value="{!Contact.Field4__c}" style="width:80px"/>
            </apex:pageBlockSectionItem>  
           </apex:pageBlockSection>

 
Sai Kethu 2Sai Kethu 2
Thanks for looking into this, I did try giving 4 columns but the spacing was weird.