Salesforce PageBlockSections Styling Problems

When you want to render displays of parts of a PageBlockSection because PageBlockSections and PageBlockSectionItems do not take the attribute Rendered you have to use Outputpanels to turn on and off the display of the PageBlockSection.

The problem with this is that the Outputpanel interferes with the styling of the PageBlockSection and the PageBlockSection does not display properly.

This can be seen in this example
( you will need to create a controller class with the visualforce page ):

The aim of this visualforce page is to simply display a button and when the button is pressed the entire Outputpanel is displayed.

<apex:form>       <apex:pageBlock >             <apex:outputPanel id="Results">                   <apex:pageBlockSection title="" columns="1" collapsible="false">                                     <apex:outputPanel rendered="{!displaySelectedFrame}"  >                               <apex:pageBlockSectionItem >                                     <apex:outputPanel >                                           <apex:outputLabel value="A Label" />                                           <h1>{! frameworkName}</h1>                                     </apex:outputPanel>                               </apex:pageBlockSectionItem>                               <apex:pageBlockSectionItem >                                     <apex:outputPanel >                                           <apex:outputLabel value="Description" />                                           {! description}                                     </apex:outputPanel>                               </apex:pageBlockSectionItem>                  </apex:outputPanel>                               <apex:pageBlockSectionItem >                                     <apex:commandButton value="Display Section" action="{!doSomething}" rerender="Results"  />                               </apex:pageBlockSectionItem>                   </apex:pageBlockSection>                   </apex:outputPanel>             </apex:pageBlock>       </apex:form>

If you move the rendered to inside the PageBlockSectionItems it solves the styling issue but the entire section of the intended rendered area no longer collapses the PageBlockSectionItems so when the page starts there is a large white space created by the PageBlockSectionItems and so the styling is still not correct. This is shown in the following:

<apex:form>       <apex:pageBlock >             <apex:outputPanel id="Results">                   <apex:pageBlockSection title="" columns="1" collapsible="false">                                                                          <apex:pageBlockSectionItem >                                     <apex:outputPanel rendered="{!displaySelectedFrame}">                                           <apex:outputLabel value="A Label" />                                           <h1>{! frameworkName}</h1>                                     </apex:outputPanel>                               </apex:pageBlockSectionItem>                               <apex:pageBlockSectionItem >                                     <apex:outputPanel rendered="{!displaySelectedFrame}" >                                           <apex:outputLabel value="Description" />                                           {! description}                                     </apex:outputPanel>                               </apex:pageBlockSectionItem>                               <apex:pageBlockSectionItem >                                     <apex:commandButton value="Display Section" action="{!doSomething}"                                           rerender="Results"  />                               </apex:pageBlockSectionItem>                   </apex:pageBlockSection>                   </apex:outputPanel>             </apex:pageBlock>       </apex:form>

  

To solve both situations use a PageBlockSection inside the Outputpanel that renders the section that we are wanting to turn on/off the display. By having 2 PageBlockSections the problem is solved.

<apex:form>       <apex:pageBlock >             <apex:outputPanel id="Results">                   <apex:pageBlockSection columns="1" collapsible="false">                                               <apex:outputPanel layout="block" rendered="{!displaySelectedFrame}"  >                       <apex:pageBlockSection columns="1" collapsible="false">                                     <apex:pageBlockSectionItem >                                           <apex:outputPanel >                                                 <h1><apex:outputLabel value="A Label" /></h1><br/>                                                 {! frameworkName}                                           </apex:outputPanel>                                     </apex:pageBlockSectionItem>                                     <apex:pageBlockSectionItem >                                           <apex:outputPanel >                                                 <h1><apex:outputLabel value="Description" /></h1><br/>                                                 {! description}                                           </apex:outputPanel>                                     </apex:pageBlockSectionItem>                       </apex:pageBlockSection>                         </apex:outputPanel>                               <apex:pageBlockSectionItem >                                     <apex:commandButton value="Display Section" action="{!doSomething}" rerender="Results"  />                               </apex:pageBlockSectionItem>                   </apex:pageBlockSection>                   </apex:outputPanel>             </apex:pageBlock>       </apex:form>