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.

Onesided

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.

Tierell

Where can i find the original skin, so i can customize it? thanx – Annadiane

It's in the SDK, the source is available here: opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.6 – Tierell

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>

Monocycle

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

Moskowitz

thanks, Florian. I know about the gap property, but this only changes space between formItemn containers.. I need to change the space between the form item container border and its actual content (textboxes, dropdowns). – Onesided

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%"/>

Pejoration

Answer 5

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

Jackjackadandy