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:
I think this is prettier:
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)
If you enjoyed this post, make sure you subscribe to my RSS feed!
13 Comments
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:
Forget it. I just noticed you were talking about a different thing …
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.
Cool man, maybe post some code so we can all take a look. Thanks!
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:
”
“
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
Nice solution Tomek! Works better than mine
eat my butt tony
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.
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.
how does this even work? length and width are not the same comparisions. lenght = number of characters, width = pixel width
oh, nevermind. carrier text width is normalized to the text width
“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.