Changing the text field width for the ColorPicker control in Flex 3

The following example shows how you can change the text field width in the ColorPicker control’s drop down swatch panel by setting the swatchPanelStyleName and textFieldWidth styles in Flex 3.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.SliderEvent; private function slider_change(evt:SliderEvent):void { var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName"); cssObj.setStyle("textFieldWidth", evt.value); colorPicker.open(); } ]]> </mx:Script> <mx:Style> ColorPicker { swatchPanelStyleName: myCustomSwatchPanelStyleName; } .myCustomSwatchPanelStyleName { } </mx:Style> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="textFieldWidth:"> <mx:HSlider id="slider" minimum="0" maximum="172" value="72" snapInterval="1" tickInterval="5" liveDragging="true" dataTipPrecision="0" change="slider_change(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:ColorPicker id="colorPicker" /> </mx:Application>