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
YeyericYeyeric 

Displaying item in 3 columns - pageblocksectionitem

Hello,

I'm working on a visualforce page. At the moment, it only has 2 colomns with the name of the field and the values displayed. (In my screenshot, it's the lines  with 24 mois, 36 mois or 48 mois.)

However, I would need to add a third column, with the name of the field and also its values. What I've done is adding a "page blocksection columns = 3" but this makes the result very bad looking, with bad gaps between fields. I would like those fields to be with a normal gap, I don't know how I can do.

Here is the screenshot : User-added image

And here is the code (I've only gone until the 24mois line as it's the same for 36 and 48) 
<apex:pageblocksection columns="1" title="{!$Label.PRICER_Parametres_offres}" collapsible="true" showHeader="true">
            <apex:pageblocksection columns="2">
                <apex:pageblocksectionitem >
                    <apex:outputlabel for="IdDateDebutContrat" value="{!$ObjectType.Offre__c.Fields.DateDedebut__c.label}"/>
                    <apex:selectList id="IdDateDebutContrat" value="{!oOfferOptionDM.sDateDebutContrat}" size="1">
                        <apex:selectOptions value="{!oOfferOptionDM.lDateDebutContrat}"/>
                    </apex:selectList>
                </apex:pageblocksectionitem>
                <apex:pageblocksectionitem >
                    <apex:outputlabel for="IdDateValidite" value="{!$ObjectType.Ref_Config_Pricer__c.Fields.Date_validite_offre__c.label}"/>
                    <apex:outputText id="IdDateValidite" value="{!oOfferOptionDM.sDateValiditeOffre}"/>
                </apex:pageblocksectionitem>
                <apex:pageblocksectionitem >
                    <apex:pageblocksection columns="3" >
                    <apex:pageblocksectionitem >    
                        <apex:outputlabel for="Id12Mois" value="{!$ObjectType.Offre__c.Fields.X12_mois__c.label}" />            
                        <apex:inputField id="Id12Mois" value="{!oOfferOptionDM.oOffer.X12_mois__c}"/>
                    </apex:pageblocksectionitem>
                    <apex:pageblocksectionitem >
                        <apex:outputlabel for="IdMarge12Mois" value="{!$ObjectType.Offre__c.Fields.TECH_Marge_12_mois_EMWh__c.label}" styleClass="labelCol"/>
                        <apex:inputField id="IdMarge12Mois" value="{!oOfferOptionDM.oOffer.TECH_Marge_12_mois_EMWh__c}"/>
                    </apex:pageblocksectionitem>
                    <apex:pageblocksectionitem >
                        <apex:outputlabel for="IdMarge12Mois" value="{!$ObjectType.Offre__c.Fields.TECH_BC_12_mois_EMWh__c.label}" styleClass="labelCol"/>
                        <apex:inputField id="IdMarge12Mois" value="{!oOfferOptionDM.oOffer.TECH_BC_12_mois_EMWh__c}"/>
                    </apex:pageblocksectionitem>
                    </apex:pageblocksection>
                </apex:pageblocksectionitem>

<apex:pageblocksectionitem >    
                        <apex:outputlabel for="Id24Mois" value="{!$ObjectType.Offre__c.Fields.X24_mois__c.label}"/>         
                        <apex:inputField id="Id24Mois" value="{!oOfferOptionDM.oOffer.X24_mois__c}"/>
                    </apex:pageblocksectionitem>
                    <apex:pageblocksectionitem >
                        <apex:outputlabel for="IdMarge24Mois" value="{!$ObjectType.Offre__c.Fields.TECH_Marge_24_mois_EMWh__c.label}" styleClass="labelCol"/>                   
                        <apex:inputField id="IdMarge24Mois" value="{!oOfferOptionDM.oOffer.TECH_Marge_24_mois_EMWh__c}"/>
                    </apex:pageblocksectionitem>
                </apex:pageblocksectionitem>

Thanks for your help
 
Anoop yadavAnoop yadav
Hi,
Use apex:panelGrid in Page.
Check the below Link for more information.
http://www.infallibletechie.com/2013/07/how-to-assign-adjust-width-for-columns.html
RamuRamu (Salesforce Developers) 
You would need to adjust the gaps with css, here is one of the post that I came across.

https://developer.salesforce.com/forums/ForumsMain?id=906F000000097YVIAY

This is another article which explains about custom css

http://www.infallibletechie.com/2013/07/how-to-assign-adjust-width-for-columns.html

Hope this helps !!
zoranszorans
Hi Yeyeric,

you can always define all page block sections with 3 columns and use aligments where needed:
  
<apex:page >
    <apex:pageBlock>
        <apex:pageBlockSection columns="3">
            <apex:pageBlockSectionItem>This is test 1</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem>This is test 2</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem>This is test 3</apex:pageBlockSectionItem>
        </apex:pageBlockSection>
        <apex:pageBlockSection columns="3">
            <apex:pageBlockSectionItem >This is test 1</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem>This is test 2</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem>&nbsp;</apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>