Changing the label text alignment in a FormItem container in Flex

10 Responses to Changing the label text alignment in a FormItem container in Flex

1. Fernanda Gomez says:

   June 7, 2008 at 10:32 pm

   Thanks for sharing, I love your blog.

   Reply
2. steven says:

   June 11, 2008 at 12:13 pm

   hi also like your blog , u can also visit this blog http://flexsamples.blogspot.com

   thanks
   St.

   Reply
3. Chandra Kumar says:

   September 22, 2008 at 8:49 pm

   After reading this example, I see that a Form tag can be placed inside ApplicationControlBar tag. I learnt one more way of populating a ComboBox with the way you have used the dataProvider property.

   Reply
4. Pirkka Rannikko says:

   March 12, 2009 at 2:58 am

   Hi and thanks for the tip!

   Can the alignment of the FormHeading component be changed also and is there an easy way to position the labels above the form fields with the mxml used here? If not, I can’t possibly understand why this kind of basic but yet very critical thing haven’t been taken care of in Flex 3 :(

   In HTML labels and form fields can be tied together semantically by making a reference to the ID attribute of the form field element using the FOR attribute of the label element. When this is done the label can be clicked and the associated field gets focus. How could this be achieved in Flex 3?

   Reply
5. Peter deHaan says:

   March 12, 2009 at 8:03 am

   Pirkka Rannikko,

   Can you please file an enhancement request for both issues at http://bugs.adobe.com/flex/ ?

   Thanks,
   Peter

   Reply
6. Marco says:

   September 9, 2009 at 5:21 am

   doesn’t work inside a TitleWindow… and i can understand why!

   Reply
   • Peter deHaan says:

     September 9, 2009 at 8:23 am

     @Marco,

     Works for me:

     <?xml version="1.0" encoding="utf-8"?>
     <!-- http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ -->
     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
             layout="vertical"
             verticalAlign="middle"
             backgroundColor="white">
      
         <mx:Script>
             <![CDATA[
                 import mx.events.ListEvent;
      
                 private function comboBox_change(evt:ListEvent):void {
                     var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customTextAlignLabel");
                     cssObj.setStyle("textAlign", evt.currentTarget.selectedItem);
                 }
             ]]>
         </mx:Script>
      
         <mx:Style>
             FormItem {
                 labelStyleName: customTextAlignLabel;
             }
      
             .customTextAlignLabel {
                 textAlign: left;
             }
         </mx:Style>
      
         <mx:ApplicationControlBar dock="true">
             <mx:Form styleName="plain">
                 <mx:FormItem label="textAlign:">
                     <mx:ComboBox id="comboBox"
                             dataProvider="[left,center,right]"
                             change="comboBox_change(event);" />
                 </mx:FormItem>
             </mx:Form>
         </mx:ApplicationControlBar>
      
         <mx:TitleWindow>
             <mx:Form>
                 <mx:FormItem label="Button">
                     <mx:TextInput />
                 </mx:FormItem>
                 <mx:FormItem label="ButtonBar">
                     <mx:TextInput />
                 </mx:FormItem>
                 <mx:FormItem label="CheckBox">
                     <mx:TextInput />
                 </mx:FormItem>
                 <mx:FormItem label="ColorPicker">
                     <mx:TextInput />
                 </mx:FormItem>
                 <mx:FormItem label="ComboBox">
                     <mx:TextInput />
                 </mx:FormItem>
             </mx:Form>
         </mx:TitleWindow>
      
     </mx:Application>

     Peter

     Reply
7. Zeeshan says:

   January 20, 2010 at 8:03 am

   If you make a FormItem required=”true”, the “*” appears even before the label which looks ugly. Not sure how to overcome this.
   – zeeshan

   Reply
   • Zeeshan says:

     January 20, 2010 at 8:27 am

     i guess it’s because I was adding a Label component to the formItem first. Can you provide detail on how to make it work on TitleWindow?

     - Zeeshan

     Reply
8. An says:

   February 17, 2010 at 12:10 am

   For every FormItem add : styeName=customTextAlignLabel

   example:

   Reply