Flex: How to control spacing between form item and corresponding errorString?

actionscript-3, apache-flex, flex4

Solution

You can control the positioning of the error message by making a custom `FormItemSkin`.

Here are some snippets from the default `FormItemSkin` class. Note that this skin uses "constraint" columns/rows to line up the various parts. You can either modify the definition of the columns or modify the placement of the error message inside the "helpColumn". There are many other ways to solve this, but it looks like you need to do that inside the skin.

Constraint column/row declaration:

<s:layout>
    <s:FormItemLayout>
        <s:constraintColumns>
            <!--- The column containing the sequence label. -->
            <s:ConstraintColumn id="sequenceCol" />
            <!--- The column containing the FormItem's label. -->
            <s:ConstraintColumn id="labelCol" />
            <!--- The column containing the FormItem's content. -->
            <s:ConstraintColumn id="contentCol" width="100%"/>
            <!--- The column containing the FormItem's help content. -->
            <s:ConstraintColumn id="helpCol" maxWidth="200"/>
        </s:constraintColumns>         
        <s:constraintRows>
            <!--- @private -->
            <s:ConstraintRow id="row1" baseline="maxAscent:10" height="100%"/>
        </s:constraintRows>  
    </s:FormItemLayout>
</s:layout>

And here is the label object that is used to display the error message. You can set the left edge of the label to be closer to the input field by using something like this: `left="helpCol:10"` (instead of `helpCol:27`).

<s:RichText id="errorTextDisplay" includeIn="errorStates"
            fontStyle="italic" fontWeight="normal" color="0xFE0000"
            left="helpCol:27" right="helpCol:10"
            bottom="row1:10" baseline="row1:0" 
            maxDisplayedLines="-1"/>

Problem

Here's a simple application to illustrate my question. Instructions: - run the attached Flex 4 code - enter 0 in the first form item (e.g. "Enter Speed (MPH)") - click on the second form item - observe that the error string occurs way to the right of the first form item Question: How to make the error string appear directly to the right of the first form item, while keeping the width of the form fixed (e.g. the current example uses a fixed form width of 400 px)? ``` <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ private function validateSpeed():void { var num:Number=Number(speedId.text); speedId.errorString=""; if (speedId.text=="") { speedId.errorString="This field is required."; return; } else if ( Number(speedId.text)<1000) { speedId.errorString="The speed must be at least 1 MPH."; return; } else if ( Number(speedId.text)>1e11) { speedId.errorString="The speed cannot exceed 100 MPH."; return; } } ]]> </fx:Script> <s:Form width="600" > <s:layout> <s:FormLayout gap="-10" horizontalAlign="center"/> </s:layout> <s:FormItem id="speedFI" label="Enter Speed (MPH):" width="600" required="true"> <s:TextInput id="speedId" width="195" textAlign="right" restrict="0-9" maxChars="7" focusOut="validateSpeed();" toolTip="Enter a speed between 1 and 100 MPH."/> </s:FormItem> <s:FormItem id="dummyFI" label="Dummy Label:" width="600" required="true"> <s:TextInput id="dummyId" width="195" textAlign="center" restrict="0-9" maxChars="7" prompt="Click here after entering 0 above." toolTip="Dummy form item."/> </s:FormItem> </s:Form> </s:Application> ```

Original source