4

I have a custom vf page for the contact object. I need to seperate fields into 2 columns so it displays like this:

enter image description here

But it is adding the fields from left to right like so: enter image description here

Here is my code:

<apex:pageBlockSection title="Member Information" collapsible="false">
        <div class="row">
            <div class="col-md-6">
                <apex:inputField value="{!Contact.Name}"/>
                <apex:outputField value="{!Contact.Birthdate}"/>
                <apex:outputField value="{!Contact.Gender__c}" />
                <apex:outputField value="{!Contact.Active__c}"/>
                <apex:outputField value="{!SelectedPolicy.Policy__r.Reward_Status__c}"/>
                <apex:outputField value="{!SelectedPolicy.Policy__r.Points_Status__c}"/>
            </div>
            <div class="col-md-6">
                <apex:outputField label="Group" value="{!SelectedPolicy.Policy__r.Account__r.Name}" />
                <apex:outputField value="{!SelectedPolicy.Policy__r.Branch__c}" />
                <apex:outputField value="{!SelectedPolicy.Current_Effective_Date__c}"/>
                <apex:outputField value="{!SelectedPolicy.VITA_End_Date__c}"/>
                <apex:outputField value="{!SelectedPolicy.Policy__r.Account__r.Platform__c}"/>
                <apex:outputField value="{!SelectedPolicy.Role__c}"/>
            </div>
        </div>
    </apex:pageBlockSection>
Improve this question
2
  • 3
    If you are using the page block section then there is no need to use the <div> and bootstrap classes. Use the standard page block component stuff. Choose one way or the other to handle the layouts for that section
    – Eric
    Jun 4, 2015 at 22:12
  • But Bootstrap is so awesome!
    – Scott Pelak
    Mar 14, 2016 at 22:11

3 Answers 3

Reset to default
4

The pageBlockSection component handles the ordering automatically as it is listed in the code. Each field is put into a cell until the number of defined columns is reached, which then starts the next row. The component also has it's own column attribute to define the number of columns to display (no need for grids). Something like below should get close to the desired output:

<apex:pageBlockSection title="Member Information" collapsible="false" columns="2">
    <apex:inputField value="{!Contact.Name}"/>
    <apex:outputField value="{!SelectedPolicy.Policy__r.Branch__c}" />
    <apex:outputField value="{!Contact.Birthdate}"/>
    <apex:outputField value="{!SelectedPolicy.Current_Effective_Date__c}"/>
    <apex:outputField value="{!Contact.Gender__c}" />
    <apex:outputField value="{!SelectedPolicy.VITA_End_Date__c}"/>
    <apex:outputField value="{!Contact.Active__c}"/>
    <apex:outputField value="{!SelectedPolicy.Policy__r.Account__r.Platform__c}"/>
    <apex:outputField value="{!SelectedPolicy.Policy__r.Reward_Status__c}"/>
    <apex:outputField label="Group" value="{!SelectedPolicy.Policy__r.Account__r.Name}" />
    <apex:outputField value="{!SelectedPolicy.Policy__r.Points_Status__c}"/>
    <apex:outputField value="{!SelectedPolicy.Role__c}"/>
</apex:pageBlockSection>

Reference: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlockSection.htm

Improve this answer
1
  • This is the standard way, but it's not allowing you to organize the fields into proper groups in your code. Grouping them in code is what I am looking for. Similar to what the OP posted in his page source.
    – Kirill Yunussov
    Sep 7, 2016 at 15:21
0

Have a look at this.

<apex:pageBlockSection title="Member Information" collapsible="false" columns="2">
 <apex:pageblocksectionitem>
                <apex:inputField value="{!Contact.Name}"/>
                <apex:outputField value="{!Contact.Birthdate}"/>
                <apex:outputField value="{!Contact.Gender__c}" />
                <apex:outputField value="{!Contact.Active__c}"/>
                <apex:outputField value="{!SelectedPolicy.Policy__r.Reward_Status__c}"/>
                <apex:outputField value="{!SelectedPolicy.Policy__r.Points_Status__c}"/>
 </apex:pageblocksectionitem>
 <apex:pageblocksectionitem>
                <apex:outputField label="Group" value="{!SelectedPolicy.Policy__r.Account__r.Name}" />
                <apex:outputField value="{!SelectedPolicy.Policy__r.Branch__c}" />
                <apex:outputField value="{!SelectedPolicy.Current_Effective_Date__c}"/>
                <apex:outputField value="{!SelectedPolicy.VITA_End_Date__c}"/>
                <apex:outputField value="{!SelectedPolicy.Policy__r.Account__r.Platform__c}"/>
                <apex:outputField value="{!SelectedPolicy.Role__c}"/>
 </apex:pageblocksectionitem>
    </apex:pageBlockSection>

This would solve your problem. Just put the fields you want in left column inside the firt pageblocksectionitem, and the right column fields in other one. Please mark as "Best Answer" if it solves your problem. Thanks

Improve this answer
1
  • Cannot do this unless you wrap the outputfield blocks into <apex:outputPanel>. And then it hides the labels, and even specifying the label attribute does not show them.
    – Kirill Yunussov
    Sep 7, 2016 at 15:19
0

Here's a clever solution that actually works: Visualforce layout prevent component column wrap

It's simple - just set columns="2" on the main apex:pageBlockSection, and then add one nested apex:pageBlockSection with columns="1" for each column, containing the fields for that column.

Improve this answer
1
  • This skews column alignment relative to other pageblocksections on the page. Still no perfect solution...
    – Kirill Yunussov
    Sep 7, 2016 at 15:22

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.