Setting the width of the dropdown menu on a Spark DropDownList control in Flex 4

By Peter deHaan On January 28, 2010 · 10 Comments

In a previous example, “Setting the width of the dropdown menu on a ComboBox control in Flex”, we saw how you could set the width of the dropdown menu on a Flex MX ComboBox control by setting the dropdownWidth property.

The following example shows how you can change the width of the Spark DropDownList control’s pop up menu so the pop up menu width matches the contents rather than the DropDownMenu button control’s width by setting the Boolean popUpWidthMatchesAnchorWidth property.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/28/setting-the-width-of-the-dropdown-menu-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_PopUpAnchor_popUpWidthMatchesAnchorWidth_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:DropDownList id="list"
            labelField="name"
            requireSelection="true"
            skinClass="skins.CustomDropDownListSkin"
            width="120"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object name="Adobe Illustrator CS5" />
                <fx:Object name="Adobe AIR 2.0" />
                <fx:Object name="ColdFusion 9" />
                <fx:Object name="Dreamweaver CS5" />
                <fx:Object name="Flash Professional CS5" />
                <fx:Object name="Adobe Flash Player 10.1" />
                <fx:Object name="Fireworks CS5" />
                <fx:Object name="Flex 4.0" />
                <fx:Object name="Lightroom 2.0" />
                <fx:Object name="Photoshop CS5" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

Then in the custom DropDownList skin you need to set the popUpWidthMatchesAnchorWidth property to false, as seen in the following snippet:

<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">

View source is enabled in the following example.

The full custom DropDownList skin, skins/CustomDropDownListSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/28/setting-the-width-of-the-dropdown-menu-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:SparkSkin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[
        [HostComponent("spark.components.DropDownList")]
        ]]>
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            import mx.events.FlexEvent;
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
 
            override public function get contentItems():Array {return contentFill};
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == false) {
                    if (border) {
                        border.visible = false;
                    }
                    if (background) {
                        background.left = background.top = background.right = background.bottom = 0;
                    }
                    if (scroller) {
                        scroller.minViewportInset = 0;
                    }
                } else {
                    if (border) {
                        border.visible = true;
                    }
                    if (background) {
                        background.left = background.top = background.right = background.bottom = 1;
                    }
                    if (scroller) {
                        scroller.minViewportInset = 1;
                    }
                }
 
                if (dropShadow) {
                    dropShadow.visible = getStyle("dropShadowVisible");
                }
 
                openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
 
                if (borderStroke) {
                    borderStroke.color = getStyle("borderColor");
                    borderStroke.alpha = getStyle("borderAlpha");
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            protected function labelDisplay_updateCompleteHandler(evt:FlexEvent):void {
                hostComponent.toolTip = labelDisplay.toolTip;
            }
        ]]>
    </fx:Script>
 
    <!---
    The PopUpAnchor control that opens the drop-down list.
 
    <p>In a custom skin class that uses transitions, set the
    <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
    -->
    <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">
 
        <!---
        This includes borders, background colors, scrollers, and filters.
        -->
        <s:Group id="dropDown" maxHeight="134" minHeight="22">
            <s:RectangularDropShadow id="dropShadow"
                    blurX="20" blurY="20"
                    alpha="0.45"
                    distance="7"
                    angle="90"
                    color="#000000"
                    left="0" right="0" top="0" bottom="0" />
 
            <s:Rect id="border"
                    left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke id="borderStroke" weight="1" />
                </s:stroke>
            </s:Rect>
 
            <!-- fill -->
            <!--- Defines the appearance of drop-down list's background fill. -->
            <s:Rect id="background"
                    left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <!---
                    The color of the drop down's background fill.
                    The default color is 0xFFFFFF.
                    -->
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>
 
            <s:Scroller id="scroller"
                    left="0" top="0" right="0" bottom="0"
                    hasFocusableChildren="false"
                    minViewportInset="1">
                <s:DataGroup id="dataGroup"
                        itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>
 
    <!---  The default skin is DropDownListButtonSkin. -->
    <s:Button id="openButton"
            skinClass="spark.skins.spark.DropDownListButtonSkin"
            focusEnabled="false"
            left="0" right="0" top="0" bottom="0" />
 
    <s:Label id="labelDisplay"
            maxDisplayedLines="1"
            mouseEnabled="false" mouseChildren="false"
            left="7" right="30" top="2" bottom="2"
            width="75"
            verticalAlign="middle"
            verticalCenter="1"
            showTruncationTip="true"
            updateComplete="labelDisplay_updateCompleteHandler(event);" />
 
</s:SparkSkin>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

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.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

10 Responses to Setting the width of the dropdown menu on a Spark DropDownList control in Flex 4

Wannes says:

April 15, 2010 at 3:01 am

Thanks for the example, but I have a question:

At this moment I have a custom dropDownSkin for that is used by all my dropdowns.
Some of the dropdowns I want to give a popup with another width so I changed the width property of the group of the PopUpAnchor to a specific width.
But from now one, all my dropdowns use that width. Can I make this dynamic? For example by adding a style property to the skin that I can use in my mxml components?

Or do I really have to make a skin for each drop down?

Thanks for your time!

Wannes says:

April 17, 2010 at 10:22 am

The way I do it now is like they explain in this tutorial: http://tv.adobe.com/watch/flex-in-a-week-day-5/creating-custom-skin-properties/
I hoped for a better solution, but this is the best I can find till now!

Peter deHaan says:

April 17, 2010 at 2:24 pm

@Wannes,

You could try something like this, setting the DropDownList control’s drop down width using the open event:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
    <s:controlBarContent>
        <s:HSlider id="sl"
                minimum="100"
                maximum="300"
                creationComplete="sl.value = ddl.width;"
                change="sl_changeHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function sl_changeHandler(evt:Event):void {
                ddl.closeDropDown(true);
                ddl.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <s:DropDownList id="ddl"
            alternatingItemColors="[#EEEEEE,#DFDFDF]"
            requireSelection="true"
            horizontalCenter="0"
            top="20"
            open="ddl.dropDown.width = sl.value;">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

Peter

Mark says:

October 15, 2010 at 6:15 am

Hi Peter – how would I display a toolTip on the items _in_the_dropDownList? (i.e., not just the selectedItem)

thanks
Saariko says:

November 28, 2010 at 9:20 am

i need this code in flash builder 4 with the current sdk. what are the changes needed?
thanx
- Peter deHaan says:
  
  November 28, 2010 at 9:56 am
  
  @Saariko,
  
  I just tested the code above with Flex Hero (4.5) beta and the code still worked as expected.
  Which version of the Flex SDK are you using, and which issues are you seeing?
  
  Peter
one1@tutopia.com says:

June 28, 2011 at 9:44 am

Hi, when the first item of my dataprovider is very small (3 letters) compared with those of more, the width of the dropdown dont work, the others items are displayed to the half

any suggestions ?
- lordB8r says:
  
  August 28, 2011 at 10:09 pm
  
  @ one1,
  
  I’ve been having the same problems. I’ve been working through either defining all of the items in the list and getting the widest item and setting the dropdown width to that (which is slow and not optimized), or trying to set the width of the item renderer when the label gets set. Unfortunately, with the 2nd method I end up getting multi-line labels, and if I try to cancel that by setting the maxLinesToDisplay, the content width gets clipped again :(
  
  Is this a bug? Peter, have you seen this behaviour before?
vijay says:

January 2, 2012 at 5:40 am

can I have the toolTip on the focusedItem of the dropDownList..?
Chris Robinson says:

January 31, 2012 at 1:27 am

further to this to be able to set the popup (open) state to match both the height and the width of the displayed items the following works nicely