CSS rule change as a result of setCustomState not immediate

[ttubbs]

Our interface calls for buttons that change color dynamically to represent different states - sort of alert levels if you will.

(Sidebar: I searched for ways to make my own custom states, and found nothing in the forums or documentation. I derived my own button type and started adding a customState property and a setCustomState method. This led to some odd behavior. Turns out these both already exist, undocumented it seems, in SmartClient (StretchImg I think). So, I dropped my derivation and am using this undocumented feature.)

So, I've got these buttons and I call myButton.setCustomState('CodeRed') and a lot of things happen like I want, all for free, and I'm very happy with that. The button images swap out to the correct colors, the icon image will change, and the value for the class attribute(s) on the DOM elements change the CSS rule. Calling myButton.setCustomState('') will set things to the default button state. All of this is very, very nice.

There is one problem I am having though, and need some tips on how to go about fixing that. The CSS rule change (via setting the class attribute on the DOM element) does not take effect immediately. I can see in FireBug that the class changes from class="buttonTitleCodeRed" to class="buttonTitleCodeYellow" but the rules defined in the css do not get applied until an event like MouseOver occurs. Specifically in my case, the red buttons have a white font color, but the font color must be made much darker on the yellow buttons. The font color doesn't reflect a change until I mouseover the button.

[nickc]

After you have call myButton.setCustomState('CodeRed') you will probably need to do a redraw(); myButton.redraw().

[ttubbs]

Didn't think of that, but gave it a try. Calling redraw did not fix the problem.

Also, this problem is happening in IE, FF, and Chrome. So I'm guessing this is probably a JavaScript/CSS thing more than a SmartClient thing, right??? Even so, any ideas how to get around it?

All the JavaScript I've seen to change font color do so by setting the style attribute (vs changing the class attribute). I really don't want to put color information inside my code.

[Isomorphic]

This report isn't really making sense - you're saying you're seeing the style change, but the browser isn't rendering the difference, and this is consistent across browsers?

Is there a color channel not working on your computer monitor? ;)

Seriously, are you aware there are two different elements, at least for a StretchImgButton: the button itself, and the label. The label has a separate titleStyle - this is what needs to change to change font.

[ttubbs]

Correct!
Nope. I'm using a really, really nice 24" iMac with great color scale. :)
Yes I am!

Here's the bit of the DOM I'm watching, it has my label text in it...

<td class="buttonTitleCodeRed" nowrap="true" align="center" valign="center" onfocus="codedButton_label.$47()" tabindex="-1" style="padding-top: 0px; padding-bottom: 0px;">Label Text Here</td>

So, I can see the value for the class attribute change when I call setCustomState() and when I mouseover/out etc. However, the rules associated with the updated class name (aka css rule) do not render when setCustomState is called. I must mouseover it to get a refresh.

[ttubbs]

Test Project

Here's a test app that shows the problem (at least on my system).
- There's three buttons: "Test Button", "make red", and "reset"
- "make red" turns the "Test Button" background to red and make label font White
- "reset" puts the button back into default state.

Custom CSS in the index.html file
I have a set of 'red' button backgrounds, which is working so didn't send those.

What I expect you will see is that you can click "make red" and the button label WILL NOT turn white until you mouse over it. Same for "reset", it will not go back to default unless you mouseover it.

Thanks,
TT

[Isomorphic]

Ok this is a SmartClient bug - thanks for the test case - very helpful for pinning it down.
We'll get this fixed ASAP - For now you can get around this by calling:

if (button.label) button.label.redraw();

after the call to 'setCustomState()' on the button

[ttubbs]

Oh, yeah! That did the trick.

Thanks,
TT