Form Item Alignment Problem

I have the following: CODE <mx:FormItem label="Fixed Total Charge:"  width="100%">                      <mx:TextInput id="fixedChg"  width="50%" />              </mx:FormItem>                              <mx:FormItem width="100%" direction="horizontal" horizontalAlign="left">                 <mx:FormItem label="Per">                       <mx:TextInput id="perUnit" />                 </mx:FormItem>                     <mx:FormItem label="Fixed Per Unit Charge">                        <mx:TextInput id="perUnitChg" />                 </mx:FormItem>             </mx:FormItem> This will put "Per" under "Fixed total charge" text input. How can I align this so that "Per" will be under "Fixed Total Charge" instead of the textbox? thanks in advance.

Do you mean like this: <mx:FormItem label="Fixed Total Charge:"  width="100%">           <mx:TextInput id="fixedChg"  width="50%" />         </mx:FormItem>           <mx:FormItem label="Per" width="100%">           <mx:TextInput id="perUnit" />         </mx:FormItem>             <mx:FormItem label="Fixed Per Unit Charge" width="100%">           <mx:TextInput id="perUnitChg" />         </mx:FormItem> Paul. I have the following: CODE <mx:FormItem label="Fixed Total Charge:"  width="100%">                      <mx:TextInput id="fixedChg"  width="50%" />              </mx:FormItem>                              <mx:FormItem width="100%" direction="horizontal" horizontalAlign="left">                 <mx:FormItem label="Per">                       <mx:TextInput id="perUnit" />                 </mx:FormItem>                     <mx:FormItem label="Fixed Per Unit Charge">                        <mx:TextInput id="perUnitChg" />                 </mx:FormItem>             </mx:FormItem> This will put "Per" under "Fixed total charge" text input. How can I align this so that "Per" will be under "Fixed Total Charge" instead of the textbox? thanks in advance.

Not quite. I need to put perUnit and perUnitChg in the same line and somewhat align per to the left. When I put a background color, I see the FormItem (direction=horizontal) expands 100% but somewhat pushes the perUnit to the left. <mx:FormItem label="Fixed Total Charge:"  width="100%">              <mx:TextInput id="fixedChg"  width="50%" />           </mx:FormItem>     <mx:FormItem direction="horizontal" width="100%">   <mx:FormItem label="Per" width="20%" >             <mx:TextInput id="perUnit" width="20%"/>           </mx:FormItem>               <mx:FormItem label="Fixed Per Unit Charge">     <mx:TextInput id="perUnitChg"  width="100%"/>           </mx:FormItem>

Ahh I understand now. <mx:Style>       FormItem {         labelStyleName: labelStyle;       }       .labelStyle{         textAlign: left;       }     </mx:Style>              <mx:Form>           <mx:FormItem label="Fixed Total Charge:" >                    <mx:TextInput id="fixedChg"  />               </mx:FormItem>           <mx:FormItem label="Per" >                   <mx:TextInput id="perUnit" />                 </mx:FormItem>                     <mx:FormItem label="Fixed Per Unit Charge">           <mx:TextInput id="perUnitChg"  />                 </mx:FormItem>         </mx:Form> http://flex.gunua.com/?p=47 Paul. Not quite. I need to put perUnit and perUnitChg in the same line and somewhat align per to the left. When I put a background color, I see the FormItem (direction=horizontal) expands 100% but somewhat pushes the perUnit to the left. <mx:FormItem label="Fixed Total Charge:"  width="100%">              <mx:TextInput id="fixedChg"  width="50%" />           </mx:FormItem>     <mx:FormItem direction="horizontal" width="100%">   <mx:FormItem label="Per" width="20%" >             <mx:TextInput id="perUnit" width="20%"/>           </mx:FormItem>               <mx:FormItem label="Fixed Per Unit Charge">     <mx:TextInput id="perUnitChg"  width="100%"/>           </mx:FormItem>

actually, still no. <mx:Style>       FormItem {         labelStyleName: labelStyle;       }       .labelStyle{           textAlign: left;         }     </mx:Style>               <mx:Form>   <mx:FormItem label="Name">     <mx:HBox>       <mx:TextInput id="firstName1" />       <mx:TextInput id="lastName1" />     </mx:HBox>   </mx:FormItem>   <mx:FormItem label="Email">     <mx:TextInput id="email" />   </mx:FormItem>   <mx:FormItem label="Fixed Total Charge:"  width="100%">              <mx:TextInput id="fixedChg"  width="50%" />           </mx:FormItem>     <mx:FormItem direction="horizontal" width="100%">     <mx:FormItem label="Fixed Total Charge: aaa" > <mx:TextInput id="fixedChga"  /> </mx:FormItem>            <mx:FormItem label="Per aaa" > <mx:TextInput id="perUnita" /> </mx:FormItem> <mx:FormItem label="Fixed Per Unit Charge aaa"> <mx:TextInput id="perUnitChga"  /> </mx:FormItem>   </mx:FormItem>   <mx:FormItem label="">     <mx:Button label="Submit" />   </mx:FormItem>    </mx:Form> see, how fixed total charge (formitem label) and fixed total charge: aaa (formitem label) are not vertically aligned? Fixed total charge: aaa (formitem label) starts right under the textbox. I need to push it to left a bit more.

d'oh:     <mx:FormItem label="Fixed Total Charge: aaa"  paddingLeft="-130"     > does it. ----- Excess quoted text cut - see Original Post for more -----