CODEWITHSUNDEEP
apache-flexflex4.5
helpdesk
helpdesk

Reputation: 2074

issues with using the <s:Form/> tag in Flex

I have a simple Form containing two input boxes. as shown in the code below :

<s:Form>
    <s:FormItem width="242" label="Name:">
        <s:TextInput x="1" y="0"/>
    </s:FormItem>
    <s:FormItem width="242" label="Evaluate at:">
        <s:TextInput/>
    </s:FormItem>
</s:Form>

the problem is the input boxes are y distances apart and i want to bring them a little bit closer. if i had used the <s:VGroup/> or <s:HGroup/>, there is the gap property to close up the gap but that property is not in the Form tag.

How can I close the gaps using the Form tag?

Upvotes: 0

Views: 459

Answers (3)

J_A_X
J_A_X

Reputation: 12847

You can do Flextras' way of doing it (I don't like it because I'm not a fan of AS code for layout stuff), or you can do this:

<s:Form>
    <s:layout>
        <s:FormLayout gap="0" />
    </s:layout>
    <s:FormItem width="242" label="Name:" height="25">
        <s:TextInput x="1" y="0"/>
    </s:FormItem>
    <s:FormItem width="242" label="Evaluate at:" height="25">
        <s:TextInput/>
    </s:FormItem>
</s:Form>

Upvotes: 1

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

The way I did it was to create a skin for all my forms. Then in CSS I set the skin I created to be the default form skin.

  1. Copy FormSkin create YourFormSkin.mxml
  2. Copy FormItemSkin create YourFormItemSkin
  3. Modify the gap in YourFormSkin.mxml
  4. Modify contentGroup LEFT property in FormItemSkin.mxml, change contentCol:0 would be the least gap. The numbers are relative to the columns setup by the form layout.

Create or edit your CSS file to include:

s|Form{
    skinClass:ClassReference("your.project.view.skins.YourFormSkin");
}
s|FormItem{
    skinClass: ClassReference("your.project.view.skins.YourFormItemSkin");
}

Now you can customize every form in your application by just editing your two skin files.

Upvotes: 2

JeffryHouser
JeffryHouser

Reputation: 39408

FormItem is a container, and extends SkinnableContainer. As such, it uses a layout class; and the gap property is usually set on the layout class.

So, assuming you're using one of the layouts that support the gap property, you can do something like this:

myFormItem.layout.gap = myNewGap;

Upvotes: 0

Related Questions