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.

score 20 · Answer 1 · answered Jul 17 '11 at 10:47

20

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>

answered Jul 17 '11 at 10:47

Glen Blanchard

926
8
17

score 12 · Accepted Answer · answered May 06 '11 at 18:15

12

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.

answered May 06 '11 at 18:15

Jonathan Rowny

7,588
1
18
26

Where can i find the original skin, so i can customize it? thanx – hendrix Feb 14 '12 at 16:54
1

It's in the SDK, the source is available here: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.6 – Jonathan Rowny Feb 14 '12 at 17:37

score 2 · Answer 3 · answered Feb 26 '11 at 17:46

2

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

answered Feb 26 '11 at 17:46

Florian F

8,822
4
37
50

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). – cili Feb 28 '11 at 16:29

score 2 · Answer 4 · answered Oct 24 '11 at 14:58

2

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

answered Oct 24 '11 at 14:58

shif

21
1

score 0 · Answer 5 · edited Aug 16 '11 at 10:35

0

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

edited Aug 16 '11 at 10:35

Kev

118,037
53
300
385

answered Mar 07 '11 at 11:20

BadmintonCat

9,416
14
78
129

spark form item gap in Flex

5 Answers5