The following example shows how you can set the width of the dropdown menu on a Flex ComboBox control by setting the dropdownWidth property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/02/setting-the-width-of-the-dropdown-menu-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>
 
    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            dropdownWidth="200" />
 
</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/02/setting-the-width-of-the-dropdown-menu-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.ComboBox;
 
            private var arr:Array;
            private var comboBox:ComboBox;
 
            private function init():void {
                arr = [];
                arr.push({label:"One"});
                arr.push({label:"Two"});
                arr.push({label:"Three"});
                arr.push({label:"Four"});
                arr.push({label:"Five"});
                arr.push({label:"Six"});
                arr.push({label:"Seven"});
                arr.push({label:"Eight"});
                arr.push({label:"Nine"});
                arr.push({label:"Ten"});
 
                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.dropdownWidth = 200;
                addChild(comboBox);
            }
        ]]>
    </mx:Script>
 
</mx:Application>
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

6 Responses to Setting the width of the dropdown menu on a ComboBox control in Flex

  1. Rebennack says:

    What about changing the DropDown height?

  2. peterd says:

    Rebennack,

    To change the height of the drop down menu, you can set the rowCount property.

    Peter

  3. computerGig says:

    I want my combobx should increase or decrease the width depends on the item selected. if the selected item is bigge the length of the combobox should increase.

  4. Carrie says:

    I have a combobox with a width of 100% in an HDividedBox. When the user increases the size of the box the size of the combobox also increases, however the dropdownwidht remains the same (too small). What event can I listen for to know when to reset the size of the dropdownwidth? I tried listening for the RESIZE event and it never fired. I also tried listening for ”widthChanged” and it didn’t fire either. Any ideas?

  5. Paul says:

    Hi Peter, i would like Adjust my combobox dropdownwidth property, but according of the length dataprovider label, exist calculatePreferredSizeFromData() but i can’t call the method… any idea for my question?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree