Question

When first entering the world of Flex form components,
I noticed it was very easy to create a nice looking form in a matter of minutes.

However, when I supplied a helpcontent component to each form component, my formlayout is messed up. The helpcontent goes over my form components, I tried everything, but I just can’t get it to align as it should.

Here is a picture:
http://gyazo.com/7363fb80c70340e029e41165b36bed2c.png

And here is the code:

    <?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">

    <s:Group width="100%" height="100%" left="10" right="10" top="10" bottom="10">
        <s:VGroup width="100%" height="100%">
            <s:HGroup width="100%" height="50%">
                <s:Form width="75%">
                    <s:layout>
                        <s:FormLayout/>
                    </s:layout>
                    <s:FormHeading label="Filter (Optioneel)" />
                    <s:FormItem label="Naam:" width="100%">
                        <s:TextInput id="txtName" width="200"/>
                        <s:helpContent>
                            <s:Label x="0" y="0" paddingLeft="0" paddingRight="0"
                                     text="Vul hier een naam in, dit mag een deel zijn."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Datum vanaf:" width="100%">
                        <mx:DateField id="dtFrom" width="200"/>
                        <s:helpContent>
                            <s:Label text="Kies hier een startdatum."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Datum tot:" width="100%">
                        <mx:DateField id="dtTo" width="200"/>
                        <s:helpContent>
                            <s:Label text="Kies hier een einddatum."/>
                        </s:helpContent>
                    </s:FormItem>
                </s:Form>

            </s:HGroup>
            <s:Panel width="100%" height="100%">
                <mx:AdvancedDataGrid id="dgRunningQuotations" left="5" right="5"
                                     top="5" bottom="25"
                                     designViewDataType="flat"
                                     resizableColumns="false" textAlign="right"
                                     variableRowHeight="true">
                    <mx:columns>
                        <mx:AdvancedDataGridColumn width="50" dataField="ID"
                                                   headerText="NR"/>
                        <mx:AdvancedDataGridColumn dataField="Name" headerText="Naam"
                                                   wordWrap="true"/>
                        <mx:AdvancedDataGridColumn width="100" dataField="PDate"
                                                   headerText="Datum"/>
                    </mx:columns>
                </mx:AdvancedDataGrid>
            </s:Panel>
        </s:VGroup>
    </s:Group>
</s:Group>

Increasing the form size to an absolute value instead of 75%, doesn’t help either.

Answer 1

Try not adding the width property on your form items and maybe even the items within that as see if that works. I tried a very simple example with no position settings and it worked fine.