Adding Chatter component changes styling of page

  • 1
  • Problem
  • Updated 4 years ago
  • Solved
Has anyone else seen this? Is there a workaround to this behaviour?

Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Because the chatter component is just wrapping the standard Salesforce Chatter VF component, we don't have a lot of control about what gets injected when it gets used.  When you use the standard salesforce header, all those resources get pulled into the page. But as your elegant UI shows,  you are not doing that...

A fallback you might find viable is to call the Social VF page from within an iFrame,  rather than using the chatter component.  In the iFrame, the page won't inject its CSS into the rest of the page and I think you'll be able to maintain your elegant UI. 
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
This is a problem with the themes that we probably won't be able to fix until a major version.  (For backwards compatibility reasons.)  The xmlns stuff in your html tag is irrelevant to what's going on.  What is relevant is that Salesforce adds certain CSS files when certain conditions are met.

1. Your page is using the standard salesforce header.

2. Your page has chatter on it.

3. The page has a standardStyleSheets="true" attribute on the apex:page tag of the Visualforce page.


Since in your case you have none of those things, certain CSS files are not getting added and the page looks different.  A workaround that will solve most of your issues is to add this css to your page.

body {
    font-size: 75%;
}


You'll still have a few things that are different, (text links for example), but you can fix those with a little extra CSS as well.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I think you are right. 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
er ... uh .... right about which?
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
You should be able to add it to all pages regardless of whether the Chatter component is included.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Will it make the text on pages that already have the chatter component even smaller?
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
no, it shouldn't.  The CSS that salesforce is sending down already has that rule, so I think it will be fine.
(Edited)