Flex - How to change open DropDownList height

Question

Using FB4, I want to change the height of an open spark DropDownList. By default, it shows up to 6 items before scrolling. My dropdownlist contains 7 items, so I want to change the height of the open dropdown list to fit all 7 items without scrolling. As a workaround, I've changed the font size of the items so that they are smaller and all 7 fit, but the smaller font doesn't look good. Is there a way to change this height? I'm rather new to Flash, so if it's a complicated solution, please be detailed :-).

Answer 1

in FB3 it's rowCount cause the dropdown is a descendant of a list control. FB4 is probably similar.

myDropdown.rowCount = 7;

I usually use something more like

myDropdown.rowCount = myDataProvider.lenght();

Answer 2

Unfortunately, this is a lot more complicated in Flex 4 than it was in Flex 3:

You should be able to define a layout for the DropDownList with a higher requestedRowCount (details here), but for > 6 rows you need to do more work (Flex issue SDK-25364).

Answer 3

The issue is, in Flex 4, the DropDownListSkin has defined maxHeight="134" for the default skin you are probably using. That forces the scrollbar to appear if the objects stretch beyond that height. All you need to do is copy/paste their DropDownListSkin code into a custom skin, and apply that to your DropDownList via CSS:

VariableHeightDropDownListSkin

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    alpha.disabled=".5"> 

    <!-- host component -->
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>

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

        <!-- removed maxHeight! -->
        <s:Group id="dropDown" minHeight="22">
            <!-- border/fill -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x5380D0" />
                </s:stroke>
                <s:fill>
                    <s:SolidColor color="0xFFFFFF" />
                </s:fill>
            </s:Rect>

            <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="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:filters>
                <s:DropShadowFilter blurX="20" blurY="20" distance="7" angle="90" alpha="0.45" color="0x6087CC" />
            </s:filters>
        </s:Group>
    </s:PopUpAnchor>

    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
        skinClass="spark.skins.spark.DropDownListButtonSkin" />
    <s:Label id="labelDisplay" verticalAlign="middle" lineBreak="explicit"
        mouseEnabled="false" mouseChildren="false"
        left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 

</s:Skin>

Sample Application

<?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"
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";

        s|DropDownList
        {
            skinClass: ClassReference("VariableHeightDropDownListSkin");
        }
    </fx:Style>

        <s:DropDownList labelField="name" horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout requestedRowCount="7"/>
            </s:layout>
            <s:dataProvider>
                <mx:ArrayCollection>
                    <fx:Object name="one"/>
                    <fx:Object name="two"/>
                    <fx:Object name="three"/>
                    <fx:Object name="four"/>
                    <fx:Object name="five"/>
                    <fx:Object name="six"/>
                    <fx:Object name="seven"/>
                </mx:ArrayCollection>
            </s:dataProvider>
        </s:DropDownList>

</s:Application>

Let me know if that helps, Lance

Answer 4

This is a great solution until the underlying bug is fixed. Thanks! I did notice that you can't apply the same workaround to the ComboBox class (which is now present in recent snapshots). You will get runtime crashes that can't easily (if at all) be worked around. Fortunately, ComboBox only differs from DropDownList in functionality that I am not currently using.

Answer 5

Thanks viatropos, because of you I have a deeper understanding of the Flex 4 Framework.

Answer 6

viatropos answer will work, however you should try and avoid overriding an entire skin as much as possible.

In this case, you will notice that in viatropos's VariableHeightDropDownListSkin code that the Group where he removed the maxHeight attribute, there is also an "id" specified.

Now look at the documentation for DropDownList and you will notice in the SkinParts section that there is a "dropDown" skin part. This is actually a property of DropDownList.

So instead of overriding the skin, you can simply use actionscript (I use UIComponent.DEFAULT_MAX_HEIGHT here, but you can use whichever you wish):

(MyDropDownList.dropDown as UIComponent).maxHeight = UIComponent.DEFAULT_MAX_HEIGHT;