Salesforce Developer Community

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
1

Questions
2

Replies

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>

Sai Kethu 2
November 08, 2016
Like
0

3 replies

4 columns in Edit/Create page

Sai Kethu 2
November 08, 2016
Like
0

SOLVED

4 replies

pageBlockSection Column Width

I am creating a visualforce page that needs to display a block section with 4 equal width columns. The issue I have is figuring out how to define each of the columns so they are the same width (the last two columns are much smaller compared to the first three).

Here is my code:

<apex:page standardController="Product_Brief__c">

    <apex:pageBlock >
        <apex:pageBlockSection columns="4">
            <apex:pageblocksectionItem ><b><center> Type 1 </center></b></apex:pageblocksectionItem>
            <apex:pageblocksectionItem ><b><center> Type 2 </center></b></apex:pageblocksectionItem>
            <apex:pageblocksectionItem ><b><center> Type 3 </center></b></apex:pageblocksectionItem>
            <apex:pageblocksectionItem ><b><center> Type 4 </center></b></apex:pageblocksectionItem>
            
            <apex:pageblocksectionItem > <apex:image url="/resource/Mix" width="100" height="100"/> </apex:pageblocksectionItem>
            <apex:pageblocksectionItem > <apex:image url="/resource/SUB1" width="100" height="100"/> </apex:pageblocksectionItem>
            <apex:pageblocksectionItem > <apex:image url="/resource/TL1" width="100" height="100"/> </apex:pageblocksectionItem>
            <apex:pageblocksectionItem > <apex:image url="/resource/SUM1" width="100" height="100"/> </apex:pageblocksectionItem>

            <apex:pageBlockSectionItem ><b> 1 - 20L Labtainer</b>    BPC's are placed in 2 plastic liners and packaged into (Company Name) branded carboard totes boxes </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ><b> 1 - 20L Labtainer</b>    BPC's are placed in 2 plastic liners and packaged into (Company Name) branded carboard totes boxes</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ><b> 1 - 20L Labtainer</b>    BPC's are placed in 2 plastic liners and packaged into (Company Name) branded carboard totes boxes</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ><b> 1 - 20L Labtainer</b>    BPC's are placed in 2 plastic liners and packaged into (Company Name) branded carboard totes boxes</apex:pageBlockSectionItem>
                    
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            
        
        </apex:pageBlockSection>
          
    </apex:pageBlock> 

</apex:page>

Thanks in advance! :-)

cambart
June 13, 2012
Like
0