spark form item gap in Flex

Question

Is there a way to change the space between a spark form item and its content(textinput, conbobox)? I already set to 0 the "gap" property of the form, but still there is a lot of vertical space left between the form inputs.

Answer 1

The spark skin for formItem has left/right variables set based on "columns." I.e. left="column1:10" means the element is 10 pixels to the right of column 1.

So, create the skin, reduce those numbers in the "content" column area and check it.

Reducing all those numbers and the gap should tighten, along with setting the gap in form layout.

Answer 2

Set the gap to -14 to get no gap between the items

<s:Form>
    <s:layout>
        <s:FormLayout gap="-14"/>
    </s:layout>
    <s:FormItem .....>
</s:Form>

Answer 3

If you want to change the vertical gap between each Spark Form Item, create a custom skin based on FormSkin and change the gap property FormLayout.

If you want to change the horizontal gap between skin parts (labelDisplay, indicatorDisplay, helpContentGroup, ...), you need to create a custom skin based on FormItemSkin and change the ConstraintColumn values

Answer 4

I changed in my custom FormItem skin as followed, and it worked for me:

before:

<s:ConstraintRow id="row1" baseline="maxAscent:10" height="100%"/>

after:

<s:ConstraintRow id="row1" baseline="maxAscent:0" height="100%"/>

Answer 5

There are no paddingLeft, paddingRight etc. properties in FormItemLayout yet.