1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    23
    Vote Rating
    2
    frank.zammetti is on a distinguished road

      0  

    Question Answered: Styling a button not working

    Answered: Styling a button not working


    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:

    Code:
    { 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:

    Code:
    .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:

    Code:
    .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

  2. 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:

    Code:
    .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:

    Code:
    .custom .x-btn-inner
    Another alternative is to use the !important modifier on your styles but generally I'd avoid that where possible.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,590
    Answers
    541
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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:

    Code:
    .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:

    Code:
    .custom .x-btn-inner
    Another alternative is to use the !important modifier on your styles but generally I'd avoid that where possible.

  4. #3
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    23
    Vote Rating
    2
    frank.zammetti is on a distinguished road

      0  

    Default


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

    Frank

Thread Participants: 1