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 :-).

Sanders

Answer 1

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

Misconstruction

and if i want to get the rowCount property of the spark comboBox ? – Raycher

Answer 2

Isn't it easier if you use the property requestedRowCount of the verticalLayout?

<s:DropDownList dataProvider="{myDataProvider}">
    <s:layout>
        <s:VerticalLayout requestedRowCount="10"/>
    </s:layout>
</s:DropDownList>

Giselegisella

This was by far the easiest and simplist solution that I found. Thanks for posting this. – Pollen

It might be worth mentioning that this may only work in Flash Builder 4.5 and newer (in the original post, I was using FB4). See @PieterKuijpers answer, with a link to a Flex issue, where it shows that the issue was resolved in 4.5.0.17882. – Sanders

With this don't forget to add gap="0" , horizontalAlign="contentJustify" for normal look as well. – Caption

Answer 3

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;

Pauperism

Works for mx, but not for spark. – Ought

Answer 4

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).

Overture

Answer 5

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();

Suite

no it's not the same friend the dropDown property does not exist in Flex 4 – Raycher