function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Chris HubbardChris 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.
Best Answer chosen by Chris Hubbard
Chris HubbardChris Hubbard
This issue is now being reviewed.  The main issue is a conflict between Chatter's CSS and the main Salesforce CSS and the order of the loading of those styles.  I've noticed that the issue is there one day, then not there another day, then it may come back again another day, so it seems apparent that SF is working on it.  Please feel free to checkout https://success.salesforce.com/issues_view?id=a1p300000008XjtAAE and click 'This Issue Affects Me'.  If this issue is affecting your VisualForce pages, then you can add the following to your VisualForce page to fix the formatting on that page, however the sidebar and navbar will still be broken.

<style>
        h1, h2, h3, h4, h5, h6 { font-family: Arial,Helvetica,sans-serif !important; }
        h2.pageDescription { color: #000 !important; }
</style>

All Answers

Chris HubbardChris Hubbard
This is an issue as of the Spring '15 release.
Balázs RubicsekBalázs Rubicsek
I am having the same issue, since that latest release.
Chris HubbardChris Hubbard
This issue is now being reviewed.  The main issue is a conflict between Chatter's CSS and the main Salesforce CSS and the order of the loading of those styles.  I've noticed that the issue is there one day, then not there another day, then it may come back again another day, so it seems apparent that SF is working on it.  Please feel free to checkout https://success.salesforce.com/issues_view?id=a1p300000008XjtAAE and click 'This Issue Affects Me'.  If this issue is affecting your VisualForce pages, then you can add the following to your VisualForce page to fix the formatting on that page, however the sidebar and navbar will still be broken.

<style>
        h1, h2, h3, h4, h5, h6 { font-family: Arial,Helvetica,sans-serif !important; }
        h2.pageDescription { color: #000 !important; }
</style>
This was selected as the best answer