Size-to-content FormItem height

Question

I put a FormItem in a Form like below.

<mx:Form width="100%">
            <mx:FormItem label="Context Aware" width="100%" backgroundColor="red">
                <editorControls:CheckBox/>
            </mx:FormItem>
        </mx:Form>

There's gap between the actual content height and the form item boundary. Any idea on how to strictly fit the FormItem height to content?

This is Image:

enter image description here

This looks like it has to do something with padding. Have you tried setting the `padding` to 0 ? — Ranhiru Jude Cooray, Jan 04 '12 at 04:27
Yes, I did try below, but it doesn't change anything. Here is the image (http://i40.tinypic.com/126b38y.png), as you see, there's gap shown in blue blocks. ` ` — Daniel Luo, Jan 04 '12 at 05:21

iND · Answer 1 · 2012-01-04T17:38:11.297

The checkbox is actually a button with an image overlaid on it, as an icon. The icon is a box with some whitespace, as an image. You will have to create a new image which does not have whitespace, and replace the current icon. Remember that this applies to downstate and so on, so you will need a series of similar images. (cf., Adobe's Button docs example).

Of course, you will also have to set verticalGap and indicatorGap as well as paddingTop to 0, on the CheckBox, FormItem, and Form. (cf., Adobe's Flex help on Form, FormHeading, and FormItem layout containers, the section titled "Laying out forms").

Here is some sample code:

<mx:Form width="100%" backgroundColor="0x0000ff" verticalGap="0" paddingTop="0" indicatorGap="0">
    <mx:FormItem label="Context Aware" width="100%" backgroundColor="0x00ff00"  verticalGap="0" paddingTop="0" indicatorGap="0">
        <mx:CheckBox  verticalGap="0" paddingTop="0" icon="@Embed('cbIcon.gif')"/>
    </mx:FormItem>
</mx:Form>

(If the answer is wrong, please let me know. If it is right, please check it as "correct".)

Thanks for your suggestion, but the problem remains the same. — Daniel Luo, Jan 04 '12 at 13:55

Size-to-content FormItem height

1 Answers1