1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    26
    Vote Rating
    65
    frank.zammetti is a jewel in the rough frank.zammetti is a jewel in the rough frank.zammetti is a jewel in the rough

      0  

    Question 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,747
    Vote Rating
    363
    Answers
    572
    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
    26
    Vote Rating
    65
    frank.zammetti is a jewel in the rough frank.zammetti is a jewel in the rough frank.zammetti is a jewel in the rough

      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

  5. #4
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    317
    Vote Rating
    1
    Answers
    9
    talha06 is on a distinguished road

      0  

    Default

    I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.


    ExtJS button has 2 configuration for styling according to documentation:
    Code:
    overCls
    and
    Code:
    pressedCls
    . Despite I set them both pressedCls configuration did not work for me.


    Which css properties should I override/define in order to create my own buttons?

    Here is the fiddle I created for : https://fiddle.sencha.com/#fiddle/fim
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

Thread Participants: 2