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

In a previous example, “Changing the preview color width for the ColorPicker control in Flex 3″, we saw how you can change the preview color width for a ColorPicker control.

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.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/01/changing-the-text-field-width-for-the-colorpicker-control-in-flex-3/ -->
<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>

View source is enabled in the following example.

If you want to remove the text field completely, you can set the showTextField property to false. For more information, see “Toggling the text field in a Flex ColorPicker control”.