View Full Version : CSS class problem

25 Aug 2011, 4:27 AM
Hi everyone,

I'm creating an application in which I add extra css with just a simple css file. When I use id's everything works well, but once I'm using classes the css isn't applied. It happens when I use cls, iconCls and when I use classes in html.

I thought it had something to do with my css code, but now I am copying the error field part of the tutorial about forms and it still doesn't work. Is there some settings you should put on or something?

Here is my css code:

/* My code , working*/
#speed{ width: 75px;
right: 0px;
position: absolute;
height: 75px;
bottom: 0px;
font-weight: bold;
color: #000000;

/* Tutorial code, not working */
.invalid-field .x-form-label { color: red; }

.errorfield { font-size: 0.75em; }
.errorfield ul { margin: 10px; }

This is the class where I use the css:

movemeapp.views.ErrorField = Ext.extend(Ext.Component, { initComponent: function() {
config = {
xtype: 'component',
id: this.fieldname + 'ErrorField',
cls: 'errorfield',
tpl: [
'<tpl if="values.length &gt; 0">',
' <ul>',
' <tpl for=".">',
' <li>{field} {message}</li>',
' </tpl>',
' </ul>',
hidden: true

Ext.apply(this, config);

Ext.reg('movemeapp.views.ErrorField', movemeapp.views.ErrorField);

Thanks in advance,


1 Sep 2011, 2:02 PM
Inevitably this boils down to CSS selector syntax and the order of operations.

Selecting elements by ID is fast and unlikely to encounter CSS collisions. Selection by class on the other hand is often problematic, as you are seeing. The Sencha frameworks have a lot of inherited CSS, so this is no surprise.

The answer may be as simple as adding "!important" to the attributes. Otherwise you should start using your favorite DOM inspector to see how the CSS is being applied and overwritten.

2 Sep 2011, 6:46 AM

I used weinre to see which css is applied to the div of the errorField. In the list I cannot see any css classes I defined (the errorfield class). It looks like it isn't applied at all or it can't seem to find my definition.

I also added !important but that doesn't change a thing. I guess because it can't find the class at all.

Any other tips or tricks to find out what's going on?

6 Sep 2011, 7:54 AM
An easy debugging trick would be to use Ext.getCmp() to locate your component by the ID you have assigned to it. Then inspect it's CSS in Firebug (or whatever tool you're using).