1. #1
    Sencha User JNason's Avatar
    Join Date
    Aug 2007
    Location
    Louisville
    Posts
    43
    Vote Rating
    0
    JNason is on a distinguished road

      0  

    Default Adding CSS to Radio Button BoxLabel

    Adding CSS to Radio Button BoxLabel


    I'm feeling exceptionally stupid today. I just want to make the text in the boxLabel attached to a radio button grey when the button is disabled. I can't figure out how to do it. I've managed to change the css of just about everything else on the form, but this one is escaping me.

    Code:
    new Ext.form.Radio({
                    boxLabel:'Sample Disabled Button',
                    name:'use',
                    disabled: true,
                    checked:false,
                    width:'auto',
                    inputValue: '1'
    });

  2. #2
    Sencha User JNason's Avatar
    Join Date
    Aug 2007
    Location
    Louisville
    Posts
    43
    Vote Rating
    0
    JNason is on a distinguished road

      0  

    Default


    Ok. I figured it out.

    I just added a itemCls to the button and added label to the css and it worked.

    js
    Code:
    new Ext.form.Radio({
                    boxLabel:'Sample Disabled Button',
                    name:'use',
                    disabled: true,
                    checked:false,
                    width:'auto',
                    inputValue: '1',
                    itemCls: 'disabledButton '
    });
    css

    Code:
    .disabledButton label{color:gray}
    Why is it that I can spend all day trying to figure something out on my own and I get no where. The second I post a question, I figure it out.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2014
    Posts
    54
    Vote Rating
    1
    rsravishankar is on a distinguished road

      0  

    Default


    Thank you, this helped me. Initially I thought just setting the disabledCls should work. Now I find that the class assigned to disabledCls followed by label (e.g. if
    Code:
    disabledCls: 'abc_class'
    in my ExtJS code, then css should go:

    Code:
    abc_class label {color: gray}
    . A similar thing holds true for input
    Code:
    abc_class input {
        color: #afafaf !important;
        opacity: .3;
        -moz-opacity: .3;
        filter: alpha(opacity=30);
    }
    Btw how did you get to this? This is my first app and I'd appreciate guidance.Thanks.

  4. #4

Thread Participants: 2