PDA

View Full Version : ExtJS, Salesforce, and the CSS blues



Stephano
31 Mar 2011, 2:44 PM
I've been asked to demo some ExtJS UI enhancements to our current apps inside Salesforce. This is just a proof of concept that ExtJS will work as a good UI replacement for the default UI that most of our VisualForce pages use.

Everything works great, that is, except a few odds and ends of the CSS. There are lots of styles inside "...visual.force.com/sCSS/21.0/sprites/13013.../Theme3/default" that are messing with the ExtJS elements. Specifically commmon.css and extended.css. Here's an example:

Extended.css


body .x-date-middle, .x-date-left, .x-date-right {
background: none repeat scroll 0 0 transparent;
}


Result on ExtJS DateMenu:

http://farm6.static.flickr.com/5020/5578170212_c733133e96_m.jpg

How It Should Look:

http://farm6.static.flickr.com/5224/5577596719_4387cfa997_m.jpg

I realize that lots of Salesforce's UI uses ExtJS (their code editor for example). So, I wasn't really surprised when I started seeing these little hiccups. Is there an elegant way around this, or is ExtJS just not going to play well inside of Salesforce?

For example: Is there a way that I can tell my VisualForce page to ignore commmon.css and extended.css? Can I tell ExtJS's CSS to go grab Salesforce's CSS and drag it into the corner, put a pointy hat on it, and tell it to be quiet?

Note:
I've heard tell that "customizing the global Ext.baseCSSPrefix config" will solve my problem in ExtJS 4. Is this true? I can see how adding a prefix to all the ExtJS classes would help in most instances, assuming they're not putting the styles on things like <li> and <td>...


reference (http://stackoverflow.com/questions/5506973/css-salesforce-extjs-and-the-blues)