Setting the width on a Flex PopUpButton control’s pop up menu

The following example shows how you can set the width of a PopUpButton control’s pop up menu in Flex by setting the width property on the Menu control instance.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/28/setting-the-width-on-a-flex-popupbutton-controls-pop-up-menu/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

            [Bindable]
            private var menu:Menu;

            private function init():void {
                menu = new Menu();
                menu.dataProvider = arr;
                menu.width = 200;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
        <mx:Object label="Donec sit amet dui nec pede aliquam auctor." />
        <mx:Object label="Integer vestibulum sodales dui." />
        <mx:Object label="Sed nonummy ligula et tortor." />
        <mx:Object label="Aenean varius neque vel felis." />
        <mx:Object label="Phasellus venenatis ipsum sit amet nisi." />
        <mx:Object label="Nullam vitae turpis et ipsum cursus venenatis." />
        <mx:Object label="Pellentesque tincidunt pede non arcu." />
        <mx:Object label="Aliquam ut massa quis ante dignissim egestas." />
        <mx:Object label="Curabitur facilisis velit sit amet metus." />
        <mx:Object label="Vivamus ornare massa ac massa." />
        <mx:Object label="Nam accumsan rutrum purus." />
    </mx:Array>

    <mx:PopUpButton id="popUpButton"
            label="Please select an item"
            popUp="{menu}"
            initialize="init();" />

</mx:Application>

View source is enabled in the following example.

As you can see, if the label doesn’t fit within the nested Menu control, the test is truncated with “…” and mousing over the item will display the full text in a tool tip.

“Anonymous” beat me to it below in the comments, but if you want to set a fixed or maximum width for the pop up menu, you can set the width property or maxWidth property so that the menu’s width doesn’t exceed the width of the PopUpButton control, as seen in the following snippet:

private function init():void {
    menu = new Menu();
    menu.dataProvider = arr;
    menu.maxWidth = popUpButton.width;
}