Using CSS to set properties in Flex
I am working on a project where I need to make the view layer fit into a small interface. Unlike in HTML, we can’t use css to control all of the look at feel features of the components in Flex. And example of something I wanted to do was to use CSS to change both the font-size and the height of a TextInput control via css. Unfortunately height is a property not a style, so be default it can not be addressed via CSS.
This is not a problem you can’t overcome, and although until yesterday I had never given this any consideration (thanks to Matt Legrand for putting me on the path). But all styles are defined inside the Actionscript metadata of our classes. So we can certainly add new styles to our favorite controls by extending them. An example of that can be seen below for the TextInput control.
package com.pnwrain.components
{
import mx.controls.TextInput;
[Style(name="height", type="Number", format="Length", inherit="no")]
public class TextInput extends mx.controls.TextInput
{
public function TextInput()
{
super();
}
override public function get height():Number {
return getStyle("height");
}
}
}
With this I can now use the Type selector CSS to control the height of my TextInput control.
TextInput {
font-size:8;
height: 15;
}
I am sure there are other ways to make this happen but this was a very short fix to a problem that could have been a little tricky. If you wanted to fool proof this you might check in the getter for height that the css style is actually set and default to something else, but this is just a simple sample of something I didn’t realize could happen.
HTH,
sim
I had a problem with your method in that the parent containers width and height were not getting updated correctly, thus causing scroll bars on the parent container.
This guy goes about this in a different way which fixed my issues.
http://www.craftymind.com/2008/03/31/hacking-width-and-height-properties-into-flexs-css-model/
Thanks for the post as I have always wondered about setting width and height through css.
-Dan
Hey Dan,
Thanks for the link. Yeah I know my method is much to simple to be useful with anything complex, especially containers. But I had not even considered that this was possible so this is just a quick demo to show that this kind of thing can be done.
Thanks for sharing your thoughts.
sim
Why in God’s name Adobe didn’t make size and position part of Flex’s CSS support boggles my mind. It’s so useful in HTML-based CSS, and would be just as useful in Flex.
Maybe we’ll see this in Gumbo, perhaps?
- max
Hi Simeon,
Michael and I wrote something like this as well, http://www.judahfrangipane.com/blog/?p=56.
Judah
Awesome tip! Thanks, this will be plenty useful for me.
I have build a little class that takes out the overriding of all the classes, you only need to override the top most container of you application and you are done. Check it out here:
http://myflex.wordpress.com/2009/12/20/adding-width-height-x-and-y-into-the-css-model-of-flex/