Changing the label text alignment in a FormItem container in Flex

The following example shows how you can set the text alignment on a Flex FormItem container’s label by setting the textAlign and labelStyleName styles.

Full code after the jump.

View MXML

<?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: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:Application>

View source is enabled in the following example.

10 thoughts on “Changing the label text alignment in a FormItem container in Flex

  1. 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.

  2. 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?

    1. @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

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

    1. 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

Comments are closed.