+ Start a Discussion
dipudipu 

How can I span a PageBlockSection into two columns in a one column display?

How can I span a PageBlockSection into two columns in a one column display?

In the following code when I use columns="2" it spans two columns (you know the correct number here is four). When I use columns="1" it shows both fields in the first column.

 

How can show the label in the first half of the page and value in the second half of the page? I am also OK with any CSS gotcha as a solution.

 

<apex:pageBlockSection title="Span Entire Page" columns="1" collapsible="true" >
   	<apex:inputField value="{!attr.Width__c}"/>
    	<apex:inputField value="{!attr.Height__c}"/>
</apex:pageBlockSection>   

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
shruthishruthi

 

<apex:pageBlockSection title="Span Entire Page" columns="1" collapsible="true" >
<apex:pageBlockSectionItem dataStyle="text-align:center; width: 50%; max-width: 55%;">
<apex:outputLabel value="Width"/>
<apex:inputField value="{!attr.Width__c}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem dataStyle="text-align:center; width: 50%; max-width: 55%;">
  <apex:outputLabel value="Height"/>
<apex:inputField value="{!attr.Height__c}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>

Try using pageBlockItem like above with dataStyle.

 

Hope this helps! :)

All Answers

shruthishruthi

 

<apex:pageBlockSection title="Span Entire Page" columns="1" collapsible="true" >
<apex:pageBlockSectionItem dataStyle="text-align:center; width: 50%; max-width: 55%;">
<apex:outputLabel value="Width"/>
<apex:inputField value="{!attr.Width__c}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem dataStyle="text-align:center; width: 50%; max-width: 55%;">
  <apex:outputLabel value="Height"/>
<apex:inputField value="{!attr.Height__c}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>

Try using pageBlockItem like above with dataStyle.

 

Hope this helps! :)

This was selected as the best answer
dipudipu

Although the sample code in the reply does work correctly, the dataStyle and labelStyle does the trick. 

CSI NathanCSI Nathan

For me, the need to span columns is usually related to a requirement for entering a lot of text (e.g. notes or comments).

 

I like to provide a place for my users to enter comments that spans the width of the page while the rest of the form controls are organized nicely into two column sections.

 

You can specify the equivelent of hieght and width with the <Apex:InputTextArea> component using the col and rows attributes.

 

col (Integer): The width of the field, as expressed by the number of characters that can display in a single row at a time.

rows (Integer): The height of the text area, as expressed by the number of rows that can display at a time.


For example:

 

<apex:pageBlockSection title="Comments" columns="1">
<apex:inputTextarea cols="65" rows="4" value="{!CustomObject__c.Comments__c}"/>
</apex:pageBlockSection>

 

I hope this helps!

 

CSI Nathan

 

reference:  http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_inputTextarea.htm

BingBing

@CSI Nathan

 

Many thanks for sharing your solution, which is exactly what I am looking for.

 

Bing Maletz

 

RovRov
thanks for the solution. strugged with alignment a lot until i hit your solution.