Auto Expand the width of drop down popup of Flex Spark DropDownList / ComboBox

I am pretty sure many people would have run into this kind of requirement many times. The problem is that when using the Spark controls like the DropDownList, the actual drop down that displays the list of options is defaulted to the width of the DropDownList component. If the length of options are greater than the width of the component, then a horizontal scroll bar appears automatically. Now, horizontal scroll bars are a bit of pain and never look good on a GUI. However, there is a very easy way in which the DropDownList can be made to auto expand to the length of the options it displays.

The key lies in the skin of the DropDownList - DropDownListSkin which uses a PopUpAnchor to control the opening and closing of the drop down options. Here in lies the problem. By default, it sets the popUpWidthMatchesAnchorWidth=true on the PopUpAnchor. To make the DropDownList auto expanding, all that needs to be done is to create a new skin which would be an exact copy of the DropDownListSkin and just set the popUpWidthMatchesAnchorWidth=false as shown below:

    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
        left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
        popUpPosition="below" popUpWidthMatchesAnchorWidth="false">

As easy as that! Another way of doing it would be through ActionScipt. For this, you need to create a new component extending from the DropDownList and set the popUpWidthMatchesAnchorWidth false in the new component. The source is shown below:

package com.codedebugged.dropdown.autoexpand
{
    import spark.components.DropDownList;
    import spark.components.PopUpAnchor;

    public class AutoExpandDropDownList extends DropDownList
    {

        [SkinPart]
        public var popUp : PopUpAnchor;

        override protected function partAdded( partName : String, instance : Object ) : void
        {
            super.partAdded( partName, instance );

            if (instance == popUp)
            {
                popUp.popUpWidthMatchesAnchorWidth = false;
            }
        }
    }
}

A sample application to show the difference between the normal DropDownList and the auto expanding one :


Notice that the drop down of the list on the right automatically grows. However, the auto expansion is a bit flaky as it jumps around in size when it encounters a lengthier data in the dataprovider. A better way would be to possibly give the drop down a fixed width which I will try to look into in another post. Since the ComboBox and the DropDownList basically work on the same principle, the same trick can be applied to get a auto expanding ComboBox as well.

Download the source