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

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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">

[GoogleAdsWide]

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.

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

  1. 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!

    1. @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

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

    thanks

    1. @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

  3. 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 ?

    1. @ 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?

Comments are closed.