CODEWITHSUNDEEP
apache-flex
mmattax
mmattax

Reputation: 27710

I need help styling FormItem components in Flex

I have a form that I would like to style. specifcally I would like to chnage the background color of the form item's label. (the backgorundColor attribute changes both the label and the inputs background color)

i.e.


<mx:Form>
    <mx:FormItem label="username:">
        <mx:TextInput />
    </mx:FormItem>
</mx:Form>

I would like to make the label with 'username:' have a different background color, but have the text input still be the default background color.

is this possible with a FormItem ?

Upvotes: 0

Views: 3650

Answers (3)

Zmogas
Zmogas

Reputation: 1165

As I see problem "hangs unanswered" for two years... and I need exactly the same functionality - different background color for label side.

I am using Flex3. I tried Form background - that changes whole form. Then tried FormItem - if you have only text entry - it does cover background, but if you have few buttons, gap between them is also of the same color. You then need extra HBox with another background. And also there is no gap between Label background and input control.

I do not want to rewrite FormItem control.

Seems I will need to use my ancestors style: Grid instead of forms and GridItem instead of FormItem. Then you can style each cell in whatever color. :o(

Upvotes: 0

JustLogic
JustLogic

Reputation: 1738

A formitem has an object it uses to display the label called the FormItemLabel, this objects purpose is so you can style the label of a form item.

In flex 2 to change the style you can try:

FormItemLabel {

}

However I looked over the flex 2 lang ref and it doesn't seem like you can change the background color of the label. Click here for lang ref link

If you are using flex 3 the desired way to change the label of the FormItem is through the formitems labelStyleName

FormItem {
  labelStyleName: newStyle;
}

However once again I don't believe they added the ability to change the background color of the label itself. Click here for lang ref link

Best choice of action if this is required would be to extend the formitem class, unless anyone else has any ideas.

Hope this helps...

Upvotes: 2

Brandon
Brandon

Reputation: 6872

Try using the flex style explorers to create your desired style:

I used the TextArea in the style explorer and formatted the background color which gave the following css output:

TextArea {
   backgroundColor: #0000ff;
}

You can change this to the following to include in you stylesheet:

.formLabel {
   backgroundColor: #0000ff;
}

Then in the FormItem tag:

<FormItem label="Label" styleName="formLabel" />

More info on Flex Style Sheets: Flex Style Sheets

These examples will show that you can declare styles within the mxml Style tags rather than an external style sheet if you would like.

Upvotes: -1

Related Questions