Setting the FormItem label width in a Form container in Flex

The following example shows how you can set the label width on a Form container in Flex by setting the labelWidth style.

Full code after the jump.

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/ -->
<mx:Application name="Form_labelWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelWidth:">
                <mx:HSlider id="sldr"
                        minimum="50"
                        maximum="150"
                        value="100"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Form id="frm"
            labelWidth="{sldr.value}"
            backgroundColor="yellow">
        <mx:FormHeading label="Form Heading" />
        <mx:FormItem label="Form Item:">
            <mx:Label text="The quick brown fox jumps over the lazy dog" />
        </mx:FormItem>
        <mx:FormItem label="SDK version:">
            <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
        </mx:FormItem>
        <mx:FormItem label="Flash Player version:">
            <mx:Label text="{Capabilities.version}" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

You can also set the labelWidth property in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/ -->
<mx:Application name="Form_labelWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        Form {
            labelWidth: 75;
        }
    </mx:Style>
 
    <mx:Form id="frm"
            backgroundColor="yellow">
        <mx:FormHeading label="Form Heading" />
        <mx:FormItem label="Form Item:">
            <mx:Label text="The quick brown fox jumps over the lazy dog" />
        </mx:FormItem>
        <mx:FormItem label="SDK version:">
            <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
        </mx:FormItem>
        <mx:FormItem label="Flash Player version:">
            <mx:Label text="{Capabilities.version}" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

Or, you can set the labelWidth style using ActionScript, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/ -->
<mx:Application name="Form_labelWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
 
            protected function sldr_changeHandler(evt:SliderEvent):void {
                frm.setStyle("labelWidth", evt.value);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelWidth:">
                <mx:HSlider id="sldr"
                        minimum="50"
                        maximum="150"
                        value="100"
                        liveDragging="true"
                        change="sldr_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Form id="frm"
            backgroundColor="yellow">
        <mx:FormHeading label="Form Heading" />
        <mx:FormItem label="Form Item:">
            <mx:Label text="The quick brown fox jumps over the lazy dog" />
        </mx:FormItem>
        <mx:FormItem label="SDK version:">
            <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
        </mx:FormItem>
        <mx:FormItem label="Flash Player version:">
            <mx:Label text="{Capabilities.version}" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

One thought on “Setting the FormItem label width in a Form container in Flex

Comments are closed.