How to specify the width of the drop down popup in a Flex DropDownList

In a previous post, it has been seen that it is quite easy to make the drop down of the DropDownList auto expand to the size of the contents. But we have also seen that it is a bit flaky, in the sense, the width of the popup jumps around when it encounters content that is longer than any it has been displaying previously. This is because the drop down uses the DataGroup which creates itemRenderers judicially on a "as needed" basis. In some cases, it might be better if the popup opens up to a fixed width to give a consistent UI performance. Again, the standard DropDownList does not allow for it and we have to make a simple tweak to make this happen.

The DropDownList which essentially extends from SkinnableDataContainer, defines a optional SkinPart - dropDown which defines the drop down list area  to be displayed when the list is open. If you have a look at the DropDownListSkin, we can see that this SkinPart is very much present and is actually the wrapper for our drop down contents. So all we need to do is to give it a fixed width and our work is done.

This can be achieved easily by extending the current DropDownList and using a property which can be used to specify the width of the drop down. The simple solution would look something like below:

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

    public class AutoExpandOrFixedWidthDropDownList extends DropDownList
    {

        [SkinPart]
        public var popUp : PopUpAnchor;

        private var _dropDownWidth : Number = NaN;

        private var dropDownWidthChanged : Boolean;

        [Bindable]
        public function get dropDownWidth() : Number
        {
            return _dropDownWidth;
        }

        public function set dropDownWidth( value : Number ) : void
        {
            if (_dropDownWidth != value)
            {
                _dropDownWidth = value;
                dropDownWidthChanged = true;
                invalidateProperties();
            }
        }

        override protected function commitProperties() : void
        {
            super.commitProperties();

            if (dropDownWidthChanged)
            {
                dropDownWidthChanged = false;
                setDropDownWidth();
            }
        }

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

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

        private function setDropDownWidth() : void
        {
            if (dropDown && !isNaN( dropDownWidth ))
            {
                dropDown.width = dropDownWidth;
            }
        }
    }

}

The component provides a simple property - dropDownWidth which can be set by the user and it sets the width of the drop down to it. If this property is not set, the list behaves like an auto expanding one as seen in the previous post. A sample application to show the working of the list can be seen below.



Sometimes, it might be difficult to guess the exact width of the drop down but you would still want it open up to a fixed width encompassing even your largest element in the dataprovider. This is where you can use the typicalItem property of the DropDownList. The List based controls use this property to guess their initial width. If you don't specify it, it takes the first item of the dataProvider. You can use it to your benefit by iterating through the dataProvider and finding your largest content. Specify this item as the typicalItem and it would calculate its size depending on it. I will try to post an example of it later.

The same patch should be applicable for a ComboBox as well.

Still, I think the list can be bettered. As you would have noticed, the drop down always opens up aligned to left edge. There could be a need to open the drop down aligned to the right edge or open it up so that is centered to the open button of the DropDownList. I will take this up in another post.

Download the source code