Changing the width of the arrow button in a Flex PopUpButton control

The following example shows you how you can customize the width of the PopUpButton control’s arrow button in Flex by setting the arrowButtonWidth style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/30/changing-the-width-of-the-arrow-button-in-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            private var menu:Menu;

            private function init():void {
                menu = new Menu();
                menu.labelField = "@label";
                menu.dataProvider = xmlList;
                popUpButton.popUp = menu;
                menu.maxWidth = popUpButton.width;
            }
        ]]>
    </mx:Script>

    <mx:XMLList id="xmlList">
        <node label="Alert" />
        <node label="Button" />
        <node label="ButtonBar" />
        <node label="CheckBox" />
        <node label="ColorPicker" />
        <node label="ComboBox" />
    </mx:XMLList>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="arrowButtonWidth:">
                <mx:HSlider id="slider"
                        minimum="16"
                        maximum="64"
                        value="16"
                        snapInterval="1"
                        tickInterval="4"
                        showTrackHighlight="true"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:PopUpButton id="popUpButton"
            label="Please select an item..."
            openAlways="true"
            arrowButtonWidth="{slider.value}"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

Since arrowButtonWidth is a style, you can also set it’s value in an external .CSS file or within an <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    PopUpButton {
        arrowButtonWidth: 96;
        popUpStyleName: myCustomPopUpStyleName;
    }

    .myCustomPopUpStyleName {
        fontWeight: normal;
        textAlign: left;
    }
</mx:Style>

Or, you can set the arrowButtonWidth style using ActionScript, as seen in the following snippet:

popUpButton.setStyle("arrowButtonWidth", 96);