Opp Detail page causing problems with Salesforce CSS

  • 1
  • Problem
  • Updated 3 years ago
I'm getting some very strange CSS injections into standard Salesforce CSS on my opp detail page. I'm not exactly sure when this started happening, but it seemed to be about the time I added an inline CSS for the first time. However, it doesn't go away when I delete that CSS snippet. 

The issues are with the sidebar and the app menu.

It seems like this wouldn't be a skuid issue because it's in the Salesforce CSS files, but it's only happening on this one Skuid page, so I thought maybe somebody here could help.

Here's how my sidebar looks, there's a gray background, and all kinds of extra style on the Create New button that isn't supposed to be there. 



Here's the CSS line that is making the gray background, when I uncheck it things look right.



Here's the CSS that is making the Create New button look funky, some particular #createnew version of the .menuButtonButton class, when cross all those out things look right.
 

Here's what the CSS should look like:



Here's what the funkiness with the app menu looks like:


Here's the CSS at work:


When I cross out the lines on the first .multiforce #toolbar section everything looks fine:
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
What happens when you try a different browser?
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Looks the same in Firefox and IE
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Any idea why this is happening? In Sandbox and production, every time I use custom CSS on any Skuid page. It's getting out of hand.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Do you happen to have a chatter news feed on your page? If you remove the news feed do the styling issues go away?
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Some pages do and some pages don't, the chatter feed doesn't seem to affect it. What affects it is having any custom CSS snippets on the page
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Jack, that's really strange, it looks like the standard Salesforce CSS is getting loaded in twice. The only time I've seen this is in cases where the Skuid Social component is being used and set to "newsfeed". Is your custom CSS set up as an inline resource or as a static resource? If it's only a small amount of CSS can you post it here?
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
I don't even know what the Skuid Social component is... :) 

All my CSS is inline, and it's different on different pages. But anytime I've got any custom CSS it does it. 

Here's a few examples:

Title Team Dashboard + HomePage
.box{ padding: 8px; background-color: LightBlue; border-width: 2px; border-color: Navy; height: 75px;         margin: 4px; position: relative; } 
.bottomtext { text-decoration:underline; position: absolute; bottom: 8px; width: 100%; text-align: left; }
MatterView
.shortPanel {min-height:20px; 
}
OppDetail
.templatesummary {margin: -30px 0 20px 40px;}
Opp New
.widePicklist select {max-width: 100%;
}
.shortPanel {min-height:20px; 
}
(Edited)
Photo of Jay Steinberg

Jay Steinberg

  • 408 Points 250 badge 2x thumb
We had this happen in the past and found that adding an !Important tag to the CSS code seemed to resolve things.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Jack,

That is really strange. If you wouldn't mind, could you grant Skuid access to your org following the instructions below so I can take a look?

http://help.skuidify.com/m/getting-started/l/182412-getting-help-how-to-grant-skuid-login-rights-to-...
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Done. Do you need the Org ID?
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
FYI, I just added !important to all the attributes in all the CSS of the Title Team Dashboard and it's still doing that. 
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Yeah, if you can email the org id and the name of a page that is exhibiting the issue to support@skuidify.com, I'll take a look.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Jack,

This looks like a confusion of terminology. Internally and in the Skuid code, we call the "Chatter Feed" component, the "Social" component. So when I was saying "Social" I should have been saying "Chatter Feed".

From looking at your org, this does seem to be the issue with the Chatter news feed causing standard Salesforce styles to be loaded in twice. Each one of these pages has a Chatter tab, and in that tab is a "Chatter Feed" component. These "Chatter Feed" components have a "Feed Type" property of "News Feed for Running User". If you remove the "Chatter Feed" component from those tabs, the issue should go away. I don't think this has anything to do with custom CSS.

Right now, the only workaround I can think of (if you still want to keep the chatter news feeds on every page) would be to put those feeds into an iframe using a template component.

Really, though, I'm not sure why you would want a news feed for the current user on each of those pages. If you change the "Feed Type" property to "Feed for Model's First Row" the issue should go away, and your chatter feed will actually be in the context of the object you're viewing instead of just the news feed for the user.

Does that make sense?
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Hi Ben,

Thanks for taking a look. You're right, taking off the chatter feed worked on the Title Team Dashboard, where it was set to Feed for running user. It would be nice to have that on the page, as that acts like a sort of home page for title team users. 

The other two pages where the CSS is messed up that have Chatter Feeds, the components are set to Feed for Model's First Row, and have always been set that way. We really need those feeds, too. 

Also, we have other pages that have Chatter Feeds that are set to Feed for Model's First Row that don't do the funky CSS.

... turns out it's the Show Followers thing - if you uncheck that it causes the CSS break even if the Chatter is set to Feed for Model's First Row. Checking that fixed the problem.  
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Cool, well at least we were able to figure out what was going on. I think there will probably be one more Superbank patch sometime that would fix this, but I'm not sure when. I do know that this is fixed in Banzai though.