Truncate your Flex ComboBox text

Today I ran into a situation where I wanted my ComboBox drop down text to have a 9px font size and a 10px font size on the text input portion. This is a problem because your labels can easily get cut off.

Ugly:
ComboBox text cut off
I think this is prettier:
ComboBox text with ellipsis



Here is how to do it:

<mx:Script>
	<![CDATA[
            [Bindable] private var carriers:ArrayCollection = new ArrayCollection();
            private static const CARRIER_TEXT_MAX_WIDTH:int = 18;
 
            private function some_type_of_init_function():void{
                  carriers = ConfigurationData.getInstance().mobile_carriers;
            }
 
            private function truncatePrompt():void{
		if(carrier_select.text.length > CARRIER_TEXT_MAX_WIDTH){
		   carrier_select.text = carrier_select.text.slice(0,CARRIER_TEXT_MAX_WIDTH-3) + "...";
		}
	     }
	]]>
</mx:Script>
<mx:ComboBox id="carrier_select" rowCount="5" height="26" width="154" 
		dataProvider="{carriers}"
		change="truncatePrompt()" />

You will obviously have to change the CARRIER_TEXT_MAX_WIDTH to fit your needs. Note that calling this on the “change” event is not as pretty because there is a delay.
UPDATE:
Turns out for this to work properly you will have to call the function from the change event. Sorry for not testing this more before I posted.

No TweetBacks yet. (Be the first to Tweet this post)
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • MySpace
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis

If you enjoyed this post, make sure you subscribe to my RSS feed!

This entry was posted in Software. Bookmark the permalink. Both comments and trackbacks are currently closed.

13 Comments

  1. Ofir Herzas
    Posted June 10, 2009 at 11:33 am | Permalink

    checkout http://blog.flexexamples.com/2008/01/26/displaying-item-tool-tips-in-a-flex-combobox-control/
    You can truncate comboBox labels using the mx.controls.Label itemRenderer:

  2. Ofir Herzas
    Posted June 10, 2009 at 11:37 am | Permalink

    Forget it. I just noticed you were talking about a different thing …

  3. Tomasz Szych
    Posted June 12, 2009 at 12:39 am | Permalink

    Hey, check out my solution:

    What I did in here is hiding the original display text field of ComboBox component (TextInput) and bining its “text” property to the label property of the button inside ComboBox. The button’s label does the job of truncating the text. Works fine and is quite a flexible solution. Although, please note that with hiding combo’s TextInput field you autamtically loose some functionalities like providaed by the “editable” property.

  4. Posted June 12, 2009 at 9:42 am | Permalink

    Cool man, maybe post some code so we can all take a look. Thanks!

  5. Tomasz Szych
    Posted June 13, 2009 at 9:51 am | Permalink

    sory Tony,

    I posted the code before but it seems it didn’t appear. I hope this time it will take a result ;)

    Here goes the code:

  6. Tomasz Szych
    Posted June 14, 2009 at 11:38 am | Permalink

    Ok,

    so here is the code:
    http://tszych.republika.pl/truncateCombo/Main.mxml

    and here you can view the result:
    http://tszych.republika.pl/truncateCombo/

    Tomek ;P

  7. Posted June 20, 2009 at 10:27 am | Permalink

    Nice solution Tomek! Works better than mine :)

  8. anton
    Posted September 21, 2009 at 9:42 am | Permalink

    eat my butt tony

  9. anton
    Posted September 23, 2009 at 5:34 pm | Permalink

    using the label as the item renderer only works if your data provider objects have the “label” property set. i’d like to see an example when you don’t have a label but are using a labelField.

  10. Posted September 23, 2009 at 5:59 pm | Permalink

    I am assuming that comment is for Tomek? I actually updated my post just to make it a bit clearer where my data is coming from. Are you basically saying that Tomek’s solution will not work unless you use objects with label attributes for the dataprovider? I think you are right about that but I’m not sure I see a clear disadvantage in using them as a dataprovider.

  11. anton
    Posted September 25, 2009 at 9:36 am | Permalink

    how does this even work? length and width are not the same comparisions. lenght = number of characters, width = pixel width

  12. anton
    Posted September 25, 2009 at 9:37 am | Permalink

    oh, nevermind. carrier text width is normalized to the text width

  13. anton
    Posted December 28, 2009 at 7:42 am | Permalink

    “I am assuming that comment is for Tomek? I actually updated my post just to make it a bit clearer where my data is coming from. Are you basically saying that Tomek’s solution will not work unless you use objects with label attributes for the dataprovider? I think you are right about that but I’m not sure I see a clear disadvantage in using them as a dataprovider.”

    yep. so if you use any other typed object and you want use a property from that object as the labelField none of this will work.

    the solution that i ended up doing was creating my own component and doing an interative measurment and field truncation by overloading the measure function. you can know the measured width of the text and the width of the container and do some simple math to set the actual field. in general, the whole truncation is really annoying to do generically for dynamic objects.