Changing DropDown size inside DropDownList [Flex, Spark Components]

Question

I use flex SDK 4.5.1 and use spark component DropDownList.

I want to dynamically change the dropDown width(not the button of the dropdownList, just the dropdown itself, which is opened when the button is clicked) to a fixed size (let's say - 140).

I managed to do so by coding this:

<s:DropDownList 
   id="cSelector"
   prompt=...
   dataProvider=...
   labelFunction="{ getOpLabel }"
   open="{adjustWidth()}"
   changing=...
   />

However, the dropdown isn't resized immediately after clicking on the dropDownList - I can see the resize process for a half of a second. Can this be fixed or implemented differently? How?

In general, I prefer that the dropdown size will be adjusted by the widest item in the list, but this doesn't happen and it seems too complicated to fix it.

Note: The coding should be made in mxml file only.

Thanks in advance

edit:

I also tried to do the following:

<s:DropDownList 
   id="cSelector"
   prompt=...
   dataProvider=...
   labelFunction="{ getOpLabel }"
   creationComplete="{handleOpenEvent()}"
   changing=...
   />

Then added:

protected function handleOpenEvent():void
{
    cSelector.addEventListener(DropDownEvent.OPEN, changeWidth);
}

protected function changeWidth(evt:Event):void
{
    cSelector.dropDown.width = 135;
}

But I still see the fast animation every time I open the dropdown. The first time is the longest one.

Answer 1

To modify the width of the List inside the DropDownList you must add this in your open handler:

private function cSelector_openHandler(event:DropDownEvent):void
{
    cSelector.dropDown.width = 300;

}

While I was testing this code I noticed that the first time it does a very fast animation, subsequent times it just opens it at the desired width.

Answer 2

Extend the DropdownList using the following code and use this new CustomDropdownList and your issue will be solved. No need for setting width, it will take the widest item width.

package com {
import mx.collections.IList;

import spark.components.DropDownList;
import spark.components.PopUpAnchor;

public class CustomDropDownList extends DropDownList
{
    [SkinPart(popUpWidthMatchesAnchorWidth)]
    public var popUp:PopUpAnchor ;
    public function CustomDropDownList():void
    {
        super();
    }
    override protected function partAdded(partName:String,    instance:Object):void
    {
        super.partAdded(partName, instance);
        if (partName == "popUp")
        {
            instance.popUpWidthMatchesAnchorWidth = false;

        }

    }
    public override function set dataProvider(value:IList):void
    {
        super.dataProvider = value;
    }
}
}