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>
