CODEWITHSUNDEEP
apache-flexflex3flash-builder
sliders_alpha
sliders_alpha

Reputation: 2454

Flex 3.5 - Form alignment

I made this form, but as you can see the first column of fields are not properly aligned. I tried to do it with the graphical editor but it just won't do it.

flex form

Here is the code :

<mx:TitleWindow
    id="SearchTitleWindow"
    title="Recherche"
    showCloseButton="true"
    horizontalAlign="right"
    width="627.8656"
    height="201" x="267" y="275">

    <mx:VBox width="100%" height="116">
        <mx:HBox>
            <mx:FormItem label="Numéro voie : "  width="140.71146" height="21.007908">
                <mx:TextInput id="numVoie" width="41.916996" height="21.007908"/>
            </mx:FormItem>
            <mx:FormItem label="Nature voie : " >
                <mx:TextInput id="natVoie" width="100"/>
            </mx:FormItem>
            <mx:FormItem label="Nom voie* : " >
                <mx:TextInput id="nomVoie" width="163.91306" height="21.007908"/>
            </mx:FormItem>
        </mx:HBox>
        <mx:HBox width="597.33203" height="20.98814">
            <mx:FormItem label="Complement :   "  width="599.3083" height="21.007908">
                <mx:TextInput id="Complement" width="497.92493" height="21.007908"/>
            </mx:FormItem>
        </mx:HBox>
        <mx:HBox>
            <mx:FormItem label="Code postal* : " >
                <mx:TextInput id="codePostal" width="101.581024" height="21.996048"/>
            </mx:FormItem>
            <mx:FormItem label="Commune* : " >
                <mx:TextInput id="Commune" width="294.13046" height="21.007908"/>
            </mx:FormItem>
        </mx:HBox>
        <mx:HBox>
            <mx:FormItem label="Coordonnées : " >
                    <mx:TextInput id="coordOne" width="169.01187" height="21.007908"/>
            </mx:FormItem>
            <mx:FormItem label="   " >
                <mx:TextInput id="coordTwo" width="169.40714" height="21.007908"/>
            </mx:FormItem>
            <mx:Button id="geocoderTourneeSearchBtn"
                       styleName="button"
                       width="120"
                       label="Géocoder"/>
        </mx:HBox>
    </mx:VBox>

    <mx:ControlBar horizontalAlign="right" height="45">
        <mx:Button id="cancelTourneeSearchBtn"
                   styleName="button"
                   width="200"
                   label="Annuler"/>
        <mx:Button id="searchTourneeSearchBtn" 
                   styleName="button"
                   width="200"
                   label="Rechercher"/>
    </mx:ControlBar>
</mx:TitleWindow>

The weird height and width parameters have been set by the graphical editor. Any idea how do do it?

Thank you.

PS : I can only use flex SDK 3.5

Upvotes: 1

Views: 835

Answers (2)

Sunil D.
Sunil D.

Reputation: 18193

The problem here is that you're not using the Form container anywhere in the code you've provided.

A Flex Form works with FormItems to figure out the width of the largest label. As such it will then be able to adjust the position (or perhaps dimensions) of each FormItem so the labels can be right aligned.

You've got a complex form where on some rows there are multiple form items. It's not clear to me how this will work w/respect to getting a proper form layout. But I'm thinking the developers may have anticipated this too.

Here's how a form should be specified in MXML:

<mx:Form>
    <mx:FormItem label="label 1">
        <mx:TextInput id="textInput1" />
    </mx:FormItem>
    <mx:FormItem label="label 2">
        <mx:TextInput id="textInput2" />
    </mx:FormItem>
</mx:Form>

I'm not exactly sure how you should handle multiple FormItems on the same row. I'd try using the HBox that contains 2 or more FormItem controls. However, I wouldn't spend a lot of time on that.

You might find that using a constraint based layout with rows and columns makes this easier to implement. The Canvas container supports layout constraints like: top, bottom, left, right. It also allows you to setup your own grid with the constrainColumns and constraintRows arrays.

Upvotes: 1

user2393886
user2393886

Reputation: 872

Actually, this problem occur due to varying width of label. I have also faced the same problem in my project. And i was fix this problem by setting the equal width of each formItem label. You should set the width of every formItem label with width of longest length label.

In your form, label "Coordonnées" have the maximum width. So, you set the width of each formItem label with the width of "Coordonnées" label.

Upvotes: 0

Related Questions