1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    61
    Vote Rating
    0
    jclark42796 will become famous soon enough

      0  

    Default Problems styling disabled fields

    Problems styling disabled fields


    In Ext 4.0.7 disabled fields now have a grayed fieldAND label. I'd like disabled fields to behave as they did in 3.3, a normal label with grayed field.

    In Ext 3.3, the x-item-disabled class was on the input field. The field labels were "normal" text and the fields were grayed out.

    In 4.0.7, the x-item-disabled class is now on a wrapping div (around the label and "field"). To accomplish my goal I can create CSS to format my label:
    Code:
    .x-item-disabled label .x-form-item-label{
      color: black;
    }
    .x-item-disabled .x-form-field{
      color: gray;
    }
    This works in FF 8, but not in IE8. The reason I don't think it's working in IE is due to the "disabled" attribute. Inspecting the DOM using web developer I see 'disabled="disabled" at the top div. Unfortunately, I have not found any way to override the defaults. This post seems to confirm that you can't:
    http://stackoverflow.com/questions/1...-ie8-using-css

    If Ext is doing this, can you either provide a way to override the styling of the label or not use the "disabled" attribute (assuming Ext is doing this)?

    Thanks,
    Jim

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    22
    Vote Rating
    0
    FCGus is on a distinguished road

      0  

    Default


    Same issue here, tried all type of css combinations and I have not been able to have the label look 'normal' (i.e. with the black font) when the field is disabled. I found a posting that this has been fixed in 4.1 but we need some type of workaround for 4.0.7 and IE.

    Thanks

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    61
    Vote Rating
    0
    jclark42796 will become famous soon enough

      0  

    Default


    I don't see this as "resolved" in 4.1, but I could missing something. I've started up a conversation again.

    http://www.sencha.com/forum/showthre...tems-too-light

  4. #4
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    99
    Vote Rating
    0
    smcguire36 is on a distinguished road

      0  

    Default


    Add the following to your main html page to remove the opacity setting on the label:

    Code:
    <style>
    	.x-item-disabled .x-form-item-label {
    		filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100) !important;
    		opacity: 1.0 !important;
    	}
    </style>
    The first line sets the opacity on IE browsers. The second line sets the opacity on all other browsers.

    Stewart McGuire
    Ext JS 2.x, 3.x, 4.x - Advanced User / Sencha Architect 3 - User

Thread Participants: 2