Flex 4.6 spark FormItem inner gap (padding) cannot be removed?

Question

Working with Flex 4.6 spark forms, i encountered strange behaviour:

FormItem element ALWAYS has inner gap (padding), which cannot be removed.

Red area on image ilustrates the unwanted GAP that i cannot manage to get rid of. Blue border represents Form component. Grey border (thin) represents FormItem component.

enter image description here

FormItem has no padding or gap property.

This is the code for image above:

    <s:Form id="form">
        <s:layout>
            <s:FormLayout gap="0"
                          paddingBottom="50"
                          paddingTop="0"/>
        </s:layout>
        <s:FormItem width="100%" label="RC">
            <s:TextInput id="myTextInput" width="215"/>
        </s:FormItem>
    </s:Form>

When developing for mobile, you want to make best use of every pixel on your screen. This is unacceptable for me since i want to have several TextInput fields and having this gap will waste lots of space...

So my question is, can the red GAP be removed? I want my FormItem to have padding 0 - meaning TextInput border will touch FormItem border...

2DH 2DH · Accepted Answer · 2012-02-14T15:59:00

Well things like that are usually managed by the skin of the component, so what you have to do is to provide your own skin for your FormItem components. The easiest way to do it is to copy the skin provided by Adobe and make some tweaks that'll accomplish what you require. Most of all you have to set baseline to maxAscent:0 on row1 ConstraintRow and bottom to row1:0 on sequenceLabelDisplay, labelDisplay and contentGroup components.

Flex 4.6 spark FormItem inner gap (padding) cannot be removed?

1 Answers