You need to sign in to do that
Don't have an account?
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?
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
What do you have specified for showHeader and standardStylesheets on your page?
...stephan
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> <apex:inputText id="contactSearch" value="{!searchQuery}" /> <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];
}
}
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
Thought it was a bug. :)
Thanks for your help. The workaround worked... as expected.