Flex Examples
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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
How to do the same with spark forms?