You need to sign in to do that
Don't have an account?
Chris Hubbard
Chatter Feed + Rerender Breaks main CSS
When you include a chatter feed and combine that with a rerender of a pageBlock, the CSS becomes doubled up causing some strange visual issues. Consider the following Test page.
<apex:page standardController="Project__c" extensions="Test_Controller">
<chatter:feedWithFollowers entityId="{!project.Id}" />
<apex:form>
<apex:pageBlock id="pageBlock">
<apex:pageBlockButtons location="top" id="buttons">
<apex:commandButton id="newButton" value="New" />
<apex:commandButton action="{!nothing}" id="saveButton" value="Save" style="display:none;" rerender="pageBlock"/>
<apex:commandButton action="{!cancelEdit}" id="cancelButton" value="Cancel" style="display:none;" rerender="pageBlock"/>
</apex:pageBlockButtons>
<apex:outputField value="{!project.Name}">
<apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="newButton" event="ondblclick" resetFunction="resetInlineEdit"/>
</apex:outputField>
</apex:pageBlock>
</apex:form>
</apex:page>
This is the controller:
public with sharing class Test_Controller {
private String projectId { get; set; }
public Project__c project { get; set; }
// constructor
public Test_Controller (ApexPages.StandardController controller) {
projectId = controller.getId();
initProject();
}
public void initProject() {
project = [select Id, Name from Project__c where Id = :projectId];
}
// cancel inline edit
public PageReference cancelEdit() {
initProject();
return null;
}
// do nothing
public PageReference nothing() {
initProject();
return null;
}
}
Go to the page and specify the Id of one of your projects. Double click to change the Name, put in some new text, click somewhere else, then click Cancel. You'll notice the rerender causes the CSS to break for the App selector (top-right) and the "Create New..." button in the sidebar.
<apex:page standardController="Project__c" extensions="Test_Controller">
<chatter:feedWithFollowers entityId="{!project.Id}" />
<apex:form>
<apex:pageBlock id="pageBlock">
<apex:pageBlockButtons location="top" id="buttons">
<apex:commandButton id="newButton" value="New" />
<apex:commandButton action="{!nothing}" id="saveButton" value="Save" style="display:none;" rerender="pageBlock"/>
<apex:commandButton action="{!cancelEdit}" id="cancelButton" value="Cancel" style="display:none;" rerender="pageBlock"/>
</apex:pageBlockButtons>
<apex:outputField value="{!project.Name}">
<apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="newButton" event="ondblclick" resetFunction="resetInlineEdit"/>
</apex:outputField>
</apex:pageBlock>
</apex:form>
</apex:page>
This is the controller:
public with sharing class Test_Controller {
private String projectId { get; set; }
public Project__c project { get; set; }
// constructor
public Test_Controller (ApexPages.StandardController controller) {
projectId = controller.getId();
initProject();
}
public void initProject() {
project = [select Id, Name from Project__c where Id = :projectId];
}
// cancel inline edit
public PageReference cancelEdit() {
initProject();
return null;
}
// do nothing
public PageReference nothing() {
initProject();
return null;
}
}
Go to the page and specify the Id of one of your projects. Double click to change the Name, put in some new text, click somewhere else, then click Cancel. You'll notice the rerender causes the CSS to break for the App selector (top-right) and the "Create New..." button in the sidebar.
<style>
h1, h2, h3, h4, h5, h6 { font-family: Arial,Helvetica,sans-serif !important; }
h2.pageDescription { color: #000 !important; }
</style>
All Answers
<style>
h1, h2, h3, h4, h5, h6 { font-family: Arial,Helvetica,sans-serif !important; }
h2.pageDescription { color: #000 !important; }
</style>