• Chris Hubbard
  • NEWBIE
  • 0 Points
  • Member since 2015

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 2
    Replies
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.
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.