PDA

View Full Version : Peculiar behavior of disabled components in IE8



tkannenb
30 Oct 2013, 12:20 PM
I have an app in which disabled fields sometimes, for some IE8 users, are not "grayed out". They're disabled in the sense that you can't change their values, but it looks like the opacity settings specified by the .x-item-disabled .x-form-field and .x-item-disabled .x-form-item-label selectors are being ignored. I cannot reproduce the issue in IE8 at all, despite the fact that I'm using the same build of that browser as the testers who are reporting the issue, and the problem never appears for anyone using FF or Chrome or IE10. The really strange thing is that if the testers reset their browsers using Tools | Internet Options | Advanced | Reset, then the problem goes away, but only for a while. Eventually, something they do (and I don't know what) makes the problem come back again.

I've read that IE8 doesn't honor opacity settings for elements that don't have positioning, but I can't imagine that the components in question are sometimes positioned and sometimes not. Are there some known gotchas related to the implementation of disabled fields for IE8?

ExtJS 4.2.1

tkannenb
31 Oct 2013, 11:18 AM
It turns out that the cause of the problem is this: ExtJS relies on opacity settings to render disabled fields, IE8 uses a CSS filter to implement opacity, and the users who are experiencing the problem are subject to a corporate security configuration that disables the ActiveX behaviors required for CSS filters to work.

So the question now is: is there any way to make disabled fields look grayed out without relying on opacity settings that can be rendered useless by the browser's security settings?

skirtle
1 Nov 2013, 2:08 AM
Couldn't you just apply a bit of custom CSS using the CSS classes you've mentioned? Some small tweaks to text color and background-color should give you something that looks disabled.

tkannenb
1 Nov 2013, 11:30 AM
I was a little hesitant to start overriding the default styles for these classes, but it turned out to be relatively easy to get reasonable results this way, and to use a conditional comment to ensure my style overrides are only applied for users viewing the site with IE8. There was a little more to it than just background and color tweaks; to get decent results for radio buttons, I had to create an alternative to the standard ExtJS radio.gif image. Here's what I ended up with:


.x-item-disabled .x-form-item-label {
color: #cccccc;
}

.x-item-disabled .x-form-cb-label {
color: #cccccc;
}

.x-item-disabled .x-form-field {
background-image: url(black_opacity10.png);
background-repeat: repeat;
}

.x-item-disabled .x-form-radio {
background-image: url(ie8-radio.png);
background-repeat: no-repeat;
}

Thanks for the suggestion!

skirtle
1 Nov 2013, 11:59 AM
Instead of a conditional comment you could use the CSS classes x-ie8 or x-ie8m (the m is short for minus) to target your selectors at just affected versions of IE. You'll find those classes on the body element. Generally that's how the default ExtJS CSS makes browser-specific overrides.

While large parts of the default CSS are very scary and mustn't be touched, it's still very much part of 'the ExtJS way' to make simple styling changes via CSS. It's usually pretty easy to guess which bits are safe to change and which bits will fundamentally break everything.