Kusunam's Blog

Problem
In traditional HTML page where we need to display list of values in a Drop Down there is always a limitation of size of Combo box and also its content i.e. if you have a value whose length is greater than Combo box length value will be truncated showing only the text up to which it can accommodate in Combo box.

History
I have seen many many HTML applications with this problem and there was no easy way to address this unless you use some Java Script trick. It came back to me on my current project and I was sure it should be easy to address in Flex. I thought I might need to write some custom component which handles click event by showing box with list of values. But with some Google search I was able to find an easy solution. Here is the original post.

Solution

Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        width="300"
        height="150"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.DropdownEvent;

            private function comboBox_open(evt:DropdownEvent):void {
                evt.currentTarget.dropdown.variableRowHeight = true;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object name="This is text can't fit in Combobox" abbr="BAL" />
        <mx:Object name="Some Text" abbr="BOS" />
    </mx:Array>

	<mx:Label text="Problemetic Combobox" />
    <mx:ComboBox id="comboBox1"
            dataProvider="{arr}"
            width="150"
            labelField="name"
            open="comboBox_open(event);"/>

	<mx:Label text="Correct Combobox" />
    <mx:ComboBox id="comboBox2"
            dataProvider="{arr}"
            width="150"
            labelField="name"
            open="comboBox_open(event);">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Text selectable="false"
                        toolTip="{data.name} ({data.abbr})" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:ComboBox>
</mx:Application>

I am updating this post after 2 weeks. Silly me I just figured out default combo box property dropdownwidth which seems to be doing the job I need for this. But again above solution is not redundant and it might be useful in cases if you do not want dropdown width to be different than combo box width. I can’t think having such a requirement but we never know

One Response so far | Have Your Say!

1. 

   How I Make $300 a Day Posting Links Online
   June 30th, 2009 at 8:09 pm #

   Cool post, just subscribed.