Styling a button not working

[frank.zammetti]

Hi all... Ok, feeling pretty stupid here... working on upgrading an ExtJS 3.x app to 4.0.6 and running into a problem styling things... now, I know all about SASS and Compass and all that, but that's a heavy lift for an upgrade exercise so I'm trying to avoid it.

So, here's an example... I have a simple button:

{ xtype : "button", width : 100, text : "My Button",
  handler : function() { }
}

Nothing fancy obviously. This is embedded in a Panel using a TableLayout inside a TabPanel in the center region of the viewport using a BorderLayout. What I want is simply for the text to be bold.

Now, in 3.x, we simply do:

.x-btn button {
  font-weight : bold;
}

That's all it took, button text is bold, good to go. But under 4.x, that doesn't seem to work. I dug through the CSS via Firebug and tried a number of things:

.x-btn-inner {
  font-weight : bold;
  color : #ff0000;
}
.x-btn-inner button {
  font-weight : bold;
  color : #ff0000;
}
.x-btn {
  font-weight : bold;
  color : #ff0000;
}

I didn't really expect the second and third one to work, but that first one especially I really don't understand not working because that's the lowest level styled based on the markup and it sure looks to me like it should override anything else that comes before it regardless. And yes, the obvious mistake of importing the Ext stylesheet after my own I already checked for, I'm good there There's no other stylesheets imported, no other inline styles anywhere. Worse still, the computed style APPEARS to be 700 (bold) in Firebug, but its not reflected on the screen so I'm half wondering if I'm misreading the computed styles somehow.

Worse still, trying to apply style directly to the button via style attribute ALSO doesn't seem to work

So, I fully expect I'm missing something simple here since generically styling has been giving me fits all day. Can anyone point it out for me?

Thanks,
Frank

[skirtle]

The problem is specificity. A more specific CSS rule will beat a less specific rule, no matter what order you specify them in. The selector ExtJS uses to style those elements (.x-btn-default-small .x-btn-inner) is more specific than the one you're attempting to use.

If you want to style all buttons you could use the same selector given above. A slightly simpler variation with the same specificity is:

.x-btn .x-btn-inner

If you only want to style some buttons then add a cls to the button (e.g. cls: 'custom') then add that to your specifier:

.custom .x-btn-inner

Another alternative is to use the !important modifier on your styles but generally I'd avoid that where possible.

[frank.zammetti]

Thanks, that did the trick. I'm not ashamed to admit that specificity still trips me up sometimes so I appreciate the help!

Frank