Search Flex Components Free

Custom Search

January 14, 2008

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="" layout="vertical" verticalAlign="top" backgroundColor="white">
<![CDATA[ import; private function slider_change(evt:SliderEvent):void
var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
cssObj.setStyle("textFieldWidth", evt.value);; } ]]>
ColorPicker { swatchPanelStyleName: myCustomSwatchPanelStyleName; }
.myCustomSwatchPanelStyleName { }
<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:ColorPicker id="colorPicker" />

Related Flex Tutorials