Fun with Flex: CSS Weirdness

By Garry Schafer in Software.

I’m a huge admirer of Flex, and specifically for it’s CSS integration (you can see some fantastic examples of which at scalenine, or watch my interview with Juan Sanchez at last year’s AdobeMax) — but every so often I come across something that I don’t know is my misunderstanding of how CSS works, or just a little bit of strangeness that makes Flex time so much fun…

For example; with this one project I’ve got a number of components I’m using, like so:

These are basically laid out as a VBox which holds 4 HBoxes – each HBox consists of a Text component and a NumericStepper:

Originally I had each Text and each NumericStepper share the same CSS (ie .workForm), but the NumericStepper’s label, as seen above, was off; though both Text and NumericStepper’s fontSize was set to 12, the label within the UIComponent of the NumericStepper really didn’t ’see’ where it was supposed to be laid out; and I had no real way to get deeper into the NumericStepper’s labelPlacement property for the label.

A suggestion on the flexcoder’s list was to move the CSS onto the HBox only and have it trickle down to both of it’s children – the NumericStepper and Text, as the 0 borderWidth seemed to be confusing the layout of the Stepper. This was close, but the NumericStepper’s background then stayed white:

So I thought I’d split off each CSS category to the class type — ie HBox.workForm and NumericStepper.workForm. How this is supposed to work is that the NumericStepper sets styles attributed to it’s class as the HBox sets it to is — pretty logical yes?

But in looking at it after compiling it’s exactly as if there’s been no splitting of the CSS style:

So, I’m curious about the way this is trickling down, and decide to test by moving NumericStepper above the HBox styles like so:

Now interestingly, the NumericStepper does set it’s fontSize to 18 as expected — but the Text component does as well! And it doesn’t have a styleName set at all:

What you’d think is that the Text, being a child of HBox would inherit the HBox.selfForm; but instead it seems that the classtype is ignored as the CSS loads and instead overwrites or adds to the current style. Meaning, all the HBox.selfForm properties are loaded, but then the NumericStepper’s selfForm is loaded and overwrites those properties shared (such as fontSize) but only adds the properties not being used, and displays them as overwritten…

Garry Schafer is ScribeLab's Director of Interactive Media. His weapons of choice are manyfold, but he's quite partial to Flex as he builds out live and on-demand media players and a host of other apps. His personal site is at grimmwerks.

0 comments

Search