+ Start a Discussion
admintrmpadmintrmp 

reRender disbands stylesheet

I'm using a reRender attribute on a commandLink to rerender an outputPanel. Inside the outputPanel is a pageBlock which contains pageBlockSections.

 

For some reason the pageBlockSection will not continue using the styling correctly and decides it want's to cover the entire pageBlock's width and use black text.

 

 

<apex:outputPanel layout="none" id="panelBlock"> <apex:pageBlock id="sectionInfo" title="Section" rendered="{!renderBoolean}"> <apex:pageBlockSection title="Section Information"> <apex:pageBlockSectionItem > <apex:outputLabel value="Test" for="test_value" /> <apex:outputText value="Test Value" id="test_value" /> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem > <apex:outputLabel value="Test2" for="test2_value" /> <apex:outputText value="Test2 Value" id="test2_value" /> </apex:pageBlockSectionItem> </apex:PageBlockSection> </apex:pageBlock> </apex:outputPanel>

 

So panelBlock gets reRendered successfully. But the styling is lost within. It loses no styling if it's already displayed so I'm assuming it's because the area is set to rendered="false". If this is the case...

 

Is it a bug?

 

Best Answer chosen by Admin (Salesforce Developers) 
stephanstephan

I'm still investigating the root cause of this issue, but it seems to be related to the use an outputPanel with layout="none". I suspect this might be a bug.

 

The workaround, however, is easy -- just set layout="block" for your outermost outputPanel.

 

...stephan

All Answers

stephanstephan

What do you have specified for showHeader and standardStylesheets on your page?

 

...stephan

admintrmpadmintrmp
Both are set to true
stephanstephan
I just tested this out and it seems to be working correctly for me. Could you post your entire page and controller source?
admintrmpadmintrmp

Okay, try this - this happens exactly how I mean:

 

 

TestPage.page

 

 

<apex:page controller="clsTest" standardStylesheets="true"> <apex:pageBlock title="Example Block"> <apex:pageBlockSection title="This block should not cover 100% of the pageBlock parent"> And it doesn't. But try searching a contact and selecting it and you'll find a block similar to this except it disbands it's styling. </apex:pageBlockSection> </apex:pageBlock> <apex:form > <apex:outputPanel layout="none" id="contactDetail"> <apex:pageBlock id="contactInfo" title="Contact" rendered="{!c.Id!=''}"> <apex:pageBlockSection title="Contact Information"> <apex:pageBlockSectionItem > <apex:outputLabel value="Contact Name:" for="contact_name" /> <apex:outputText value="{!c.Name}" id="contact_name" /> </apex:pageBlockSectionItem> </apex:pageBlockSection> </apex:pageBlock> <apex:outputPanel id="searchContactBlock" style="{!IF(c.Id=='', '', 'display:none')}"> <apex:pageBlock id="searchContact" title="Search Contact"> <!-- Start search --> <div style="overflow:hidden; margin-bottom:15px; border:1px solid #319431; background:#fff; padding:5px;" id="lookupContacts" > <div class="pbSubheader first tertiaryPalette" style="padding:10px;"> <h3>Lookup</h3> </div> <div class="pbSubsection" style="padding:10px;"> <div style="overflow:hidden; margin-bottom:15px;"> <div style="float:right"> <apex:actionStatus onstop="document.getElementById('contactResults').style.display = '';" id="statusContactSearch"> <apex:facet name="start"> <apex:outputPanel > <apex:outputText value="Searching contacts..." /> <img src="{!URLFOR($Resource.t2g, 'images/misc/ajax.gif')}" alt="[...]" /> </apex:outputPanel> </apex:facet> </apex:actionStatus> <apex:actionStatus id="statusContactSelect"> <apex:facet name="start"> <apex:outputPanel > <apex:outputText value="Please wait..." /> <img src="{!URLFOR($Resource.t2g, 'images/misc/ajax.gif')}" alt="[...]" /> </apex:outputPanel> </apex:facet> </apex:actionStatus> </div> <div style="float:left;"> <b>Search here:</b>&nbsp;&nbsp;<apex:inputText id="contactSearch" value="{!searchQuery}" />&nbsp; <apex:commandButton value="Go!" action="{!SearchContacts}" reRender="contactsList" status="statusContactSearch" /> <p><b>Please Note:</b> This demo will not validate anything for you. You will receive Salesforce errors if necessary.</p> </div> </div> <div style="display:none; background:#f3f3ec;" id="contactResults"> <apex:inputHidden value="{!selectedContact}" id="contactId" /> <apex:pageBlockSection title="Search Results" columns="1" id="contactsList"> <apex:outputPanel layout="none" rendered="{!contacts.size>0}"> <apex:dataTable value="{!contacts}" var="crec" styleClass="list" headerClass="headerRow" rowClasses="dataRow even, dataRow odd" onrowmouseout="if (window.hiOff){hiOff(this);}" onrowmouseover="if (window.hiOn){hiOn(this);}" rendered="{!contacts.size>0}"> <apex:column style="min-width:200px;"> <apex:facet name="header">Select one:</apex:facet> <apex:commandLink reRender="contactDetail" status="statusContactSelect" action="{!selectContact}" onclick="document.getElementById('{!$Component.contactId}').value='{!crec.Id}';">{!crec.Name}</apex:commandLink> </apex:column> </apex:dataTable> </apex:outputPanel> <apex:outputPanel layout="none" rendered="{!contacts.size<1}"> There were no results returned. </apex:outputPanel> </apex:pageBlockSection> </div> </div> </div> <!-- End search --> </apex:pageBlock> </apex:outputPanel> </apex:outputPanel> </apex:form> </apex:page>

 


 

 

clsTest.cls:

 

 

public class clsTest {

public String searchQuery {get; set;}
public String selectedContact {get; set;}
public List<Contact> contacts {get; set;}
public Contact c {get; set;}

public void selectContact() {
c = [SELECT Id, Name FROM Contact WHERE Id=:selectedContact];
}

public void SearchContacts() {
List<Id> contactIds = new List<Id>();
contacts = new List<Contact>();

List<List<sObject>> rs = [FIND :searchQuery IN ALL FIELDS RETURNING Contact(Id, Name)];
for ( Integer i=0; i<rs[0].size(); i++ ) contactIds.add(rs[0][i].Id);

contacts = [SELECT Id, Name FROM Contact WHERE Id IN:contactIds];
}

}

 

 

 

 

 

Message Edited by admintrmp on 03-23-2010 05:33 AM
admintrmpadmintrmp
Bump - Anyone?
admintrmpadmintrmp
Update: This only happens on the new interface. Please can someone have a look into this.
stephanstephan

I'm still investigating the root cause of this issue, but it seems to be related to the use an outputPanel with layout="none". I suspect this might be a bug.

 

The workaround, however, is easy -- just set layout="block" for your outermost outputPanel.

 

...stephan

This was selected as the best answer
admintrmpadmintrmp

Thought it was a bug. :)

 

Thanks for your help. The workaround worked... as expected.