aligning 2 pageBlockSections with same number of columns

Hi,

I have 2 pagBlockSections in the same pageBlock*, each with 3 columns that I need to align. I have tried many combinations, but whatever I do I cannot get them to align.

* I have to use 2 pageBlockSections becase VF will not allow a rerender with a RTF field.

Here is a sample of how the page renders:

Example Page

Here is the code excerpt:

<apex:pageBlock id="AddnewItem" mode="edit" rendered="{!editMode && updateAllowed}">

	<apex:pageBlockSection id="newItemDetails" collapsible="false" title="Add New Item" columns="3">
				
	<!-- Row 1: Radio buttons to decide whether Action, Decision or Note -->
		<apex:pageBlockSectionItem >
			<apex:outputLabel value="" />			<!-- Dummy label to ensure that the radio buttons are positioned correctly -->
			<apex:actionRegion >
				<apex:selectRadio id="itemTypeOptions" label=" Type" value="{!selectedItemType}" layout="lineDirection" title="Select the type of item to add">
					<apex:actionSupport event="onchange" rerender="newItemDetails" />
					<apex:selectOption itemValue="Action" itemLabel="Action" title="This is the action title" />
					<apex:selectOption itemValue="Decision" itemLabel="Decision" title="This is the Decsion title" />
					<apex:selectOption itemValue="Note" itemLabel="Note" title="This is the Note title" />
           			</apex:selectRadio>
			</apex:actionRegion>
		</apex:pageBlockSectionItem>					
		<apex:pageBlockSectionItem />
		<apex:pageBlockSectionItem />

	<!-- Row 2: Agenda, Blank, Blank -->                        
		<apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.InlineHelpText}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.label}" for="agendaItem"></apex:outputLabel>
				<apex:selectList id="agendaItem" value="{!agendaItem}" size="1" title="Select the agenda item for this item">
			<apex:selectOptions value="{!agendaList}"></apex:selectOptions>
			</apex:selectList>
		</apex:pageBlockSectionItem>					
		<apex:pageBlockSectionItem />
		<apex:pageBlockSectionItem />
	   
	<!-- Row 3: Title, Blank, Add Decision / Note Button --> 					
		<apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Title__c.InlineHelpText}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Title__c.label}" />
			<apex:outputPanel styleClass="requiredInput" layout="block">
				<apex:outputPanel styleClass="requiredBlock" layout="block"/>
				<apex:inputField value="{!quickItem.Title__c}" required="false" style="width: 350px !important;"/>
			</apex:outputPanel>
		</apex:pageBlockSectionItem>
		<apex:pageBlockSectionItem />
		<apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}" 
			title="Add a new {!selectedItemType} to the new items list"  rendered="{!selectedItemType!='Action'}"/>  
		<apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}" />
							
	<!-- Row 4: Due Date, Assigned to, Add Action Button -->							
		<apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}" helptext="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.InlineHelpText}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.label}" />
			<apex:outputPanel styleClass="requiredInput" layout="block">
				<apex:outputPanel styleClass="requiredBlock" layout="block"/>
				<apex:inputField value="{!quickItem.Due_Date__c}" required="false" />
			</apex:outputPanel>
		</apex:pageBlockSectionItem>
						
		<!-- Attendee List drop down -->						
		<apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.InlineHelpText}" rendered="{!selectedItemType=='Action'}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.label}" for="attendee"></apex:outputLabel>
			<apex:outputPanel styleClass="requiredInput" layout="block">
				<apex:outputPanel styleClass="requiredBlock" layout="block"/>
				<apex:selectList id="attendee" value="{!assignedTo}" size="1" title="Select the owner of the action">
					<apex:selectOptions value="{!attendeeList}"></apex:selectOptions>
				</apex:selectList>
			</apex:outputPanel>
		</apex:pageBlockSectionItem>
 								
		<apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}" 
			title="Add a new {!selectedItemType} to the new items list" rendered="{!selectedItemType=='Action'}"/>
							
	<!-- Row 5: Description, blank, blank (In it's own pageBlock section to allow rerender to work above-->
	<apex:pageBlockSection collapsible="false" columns="3">											
		<apex:inputField value="{!quickItem.Description__c}" style="width: 350px !important;" />			
		<apex:pageBlockSectionItem />	                                                                  
		<apex:pageBlockSectionItem />	                                                                                                                                    
	</apex:pageBlockSection>

</apex:pageBlock>

Any ideas?

Thanks

June 13, 2016
·
Like
0
·
Follow
1

Best Answer chosen by Rustyboy

Rustyboy
I finally worked out the problem: Including a commandButton in the pageBlockSection causes the distortion. Once I removed the commandButton and put it elsewhere my pageBlockSections were perfectly aligned

October 16, 2016
·
Like
0
·
Dislike
0

SFDC Guest
HI,

Please use the below code.

<apex:pageBlock id="AddnewItem" mode="edit" rendered="{!editMode && updateAllowed}">

   <apex:pageBlockSection id="newItemDetails" collapsible="false" title="Add New Item" columns="3">

   
       <apex:pageBlockSectionItem >
           <apex:outputLabel value="" />           
           <apex:actionRegion >
               <apex:selectRadio id="itemTypeOptions" label=" Type" value="{!selectedItemType}" layout="lineDirection" title="Select the type of item to add">
                   <apex:actionSupport event="onchange" rerender="newItemDetails" />
                   <apex:selectOption itemValue="Action" itemLabel="Action" title="This is the action title" />
                   <apex:selectOption itemValue="Decision" itemLabel="Decision" title="This is the Decsion title" />
                   <apex:selectOption itemValue="Note" itemLabel="Note" title="This is the Note title" />
            </apex:selectRadio>
           </apex:actionRegion>
       </apex:pageBlockSectionItem>


   
       <apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.InlineHelpText}">
           <apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.label}" for="agendaItem"></apex:outputLabel>
               <apex:selectList id="agendaItem" value="{!agendaItem}" size="1" title="Select the agenda item for this item">
           <apex:selectOptions value="{!agendaList}"></apex:selectOptions>
           </apex:selectList>
       </apex:pageBlockSectionItem>


   
       <apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Title__c.InlineHelpText}">
           <apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Title__c.label}" />
           <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
               <apex:inputField value="{!quickItem.Title__c}" required="false" />
           </apex:outputPanel>
       </apex:pageBlockSectionItem>

       <apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}"
           title="Add a new {!selectedItemType} to the new items list" rendered="{!selectedItemType!='Action'}"/>
       <apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}" />

   
       <apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}" helptext="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.InlineHelpText}">
           <apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.label}" />
           <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
               <apex:inputField value="{!quickItem.Due_Date__c}" required="false" />
           </apex:outputPanel>
       </apex:pageBlockSectionItem>

       
       <apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.InlineHelpText}" rendered="{!selectedItemType=='Action'}">
           <apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.label}" for="attendee"></apex:outputLabel>
           <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
               <apex:selectList id="attendee" value="{!assignedTo}" size="1" title="Select the owner of the action">
                   <apex:selectOptions value="{!attendeeList}"></apex:selectOptions>
               </apex:selectList>
           </apex:outputPanel>
       </apex:pageBlockSectionItem>

       <apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}"
           title="Add a new {!selectedItemType} to the new items list" rendered="{!selectedItemType=='Action'}"/>

   
   <apex:pageBlockSection collapsible="false" columns="3">
       <apex:inputField value="{!quickItem.Description__c}" />

   </apex:pageBlockSection>

</apex:pageBlock>

Please mark it as best answers if it solves your problem.

Thank You.

June 13, 2016
·
Like
0
·
Dislike
0

Rustyboy
Thanks, I tried this but no difference (I think you just removed the style="width: 350px !important;" from the Title and Description fields (I do actually need this!) - did you make any other mods?

June 13, 2016
·
Like
0
·
Dislike
0

SFDC Guest
HI,
Please use the below code.

<apex:pageBlock id="AddnewItem" mode="edit" rendered="{!editMode && updateAllowed}">


   <apex:pageBlockSection id="newItemDetails" collapsible="false" title="Add New Item" columns="3">

   
       <apex:pageBlockSectionItem >
           <apex:outputLabel value="Selected Item Type" />           
           <apex:actionRegion >
               <apex:selectRadio id="itemTypeOptions" label=" Type" value="{!selectedItemType}" layout="lineDirection" title="Select the type of item to add">
                   <apex:actionSupport event="onchange" rerender="newItemDetails" />
                   <apex:selectOption itemValue="Action" itemLabel="Action" title="This is the action title" />
                   <apex:selectOption itemValue="Decision" itemLabel="Decision" title="This is the Decsion title" />
                   <apex:selectOption itemValue="Note" itemLabel="Note" title="This is the Note title" />
            </apex:selectRadio>
           </apex:actionRegion>
       </apex:pageBlockSectionItem>


   
       <apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.InlineHelpText}">
           <apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.label}" for="agendaItem"></apex:outputLabel>
               <apex:selectList id="agendaItem" value="{!agendaItem}" size="1" title="Select the agenda item for this item">
           <apex:selectOptions value="{!agendaList}"></apex:selectOptions>
           </apex:selectList>
       </apex:pageBlockSectionItem>


   
       <apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Title__c.InlineHelpText}">
           <apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Title__c.label}" />
           <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
               <apex:inputField value="{!quickItem.Title__c}" required="false" />
           </apex:outputPanel>
       </apex:pageBlockSectionItem>

       <apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}">
           <apex:outputLabel value="Add New {!selectedItemType}"/>
       <apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}"
           title="Add a new {!selectedItemType} to the new items list" rendered="{!selectedItemType!='Action'}"/>
       </apex:pageBlockSectionItem>


   
       <apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}" helptext="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.InlineHelpText}">
           <apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.label}" />
           <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
               <apex:inputField value="{!quickItem.Due_Date__c}" required="false" />
           </apex:outputPanel>
       </apex:pageBlockSectionItem>

       
       <apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.InlineHelpText}" rendered="{!selectedItemType=='Action'}">
           <apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.label}" for="attendee"></apex:outputLabel>
           <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
               <apex:selectList id="attendee" value="{!assignedTo}" size="1" title="Select the owner of the action">
                   <apex:selectOptions value="{!attendeeList}"></apex:selectOptions>
               </apex:selectList>
           </apex:outputPanel>
       </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem>
       <apex:outputLabel value="Add New {!selectedItemType}"/>
       <apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}"
           title="Add a new {!selectedItemType} to the new items list" rendered="{!selectedItemType=='Action'}"/>
           </apex:pageBlockSectionItem>
       </apex:pageBlockSection>
   
   <apex:pageBlockSection collapsible="false" columns="3">
       <apex:inputField value="{!quickItem.Description__c}" />

   </apex:pageBlockSection>

</apex:pageBlock>

Please mark it as best answers if it solves your problem.
Thank You.

June 13, 2016
·
Like
0
·
Dislike
0

Rustyboy
Thank you. Will you please let me know what you have changed. I do not want to simply cut and paste.

Cheers

June 13, 2016
·
Like
0
·
Dislike
0

SFDC Guest
Hi,
I have added below code for commandButton.
<apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}">
            <apex:outputLabel value="Add New {!selectedItemType}"/>
        <apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}"
            title="Add a new {!selectedItemType} to the new items list" rendered="{!selectedItemType!='Action'}"/>
        </apex:pageBlockSectionItem>

And removed below unuseable pageBlockSectionItems from the page
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem />

Please mark it as best answer if it solves your problem.
Thank You.

June 22, 2016
·
Like
0
·
Dislike
0

Browse by Topic

Welcome to Support!

Show

sorted by

aligning 2 pageBlockSections with same number of columns

All Answers

You need to sign in to do that.