List with truncation instead of a horizontal scroll bar
The default spark List will add a horizontal scroll bar when the contents of the List are wider than its width. This post shows how to change that behavior using a custom item renderer so that a truncation mark like an ellipsis is used instead.
Notice in the following example that when you make the width of the Lists smaller, the top (default) List puts in a horizontal scroll bar and abruptly clips the text whereas the bottom List doesn’t show a scroll bar, but instead shows an ellipsis “…” truncation mark indicating that there is some excess text that is being cut off.
From here it might be cool to make the text automatically scroll when you hover over the item. I’ll leave that as an exercise to the reader or maybe a future post if there is enough interest.
Note: This sample requires Flex SDK 4.0.0.13982 or higher. You can get the latest SDK builds from opensource.adobe.com.
cool!
Very helpful! Thank you!
looks like what i need…
Great post! Small and helpful
Layouts really make our life easier.
Will this end up showing a tooltip when you hover over the list item? I don’t see one and think will be a good idea to do that too. Thoughts?
@Nirav – That’s a good idea. You should be able to enable tool tips by setting toolTip=”{data}” on the ItemRenderer
you should not nest groups. if you look more carefully itemRenderer already is a group. improved code:
@Marcin – Good catch. You’re code was eaten up, but essentially in this case you can get rid of the excess VGroup in the renderer and move the top/left/right/bottom positioning to the Label directly.
Hey Thanks. Its helpful and exactly what I was looking for.
Keep the good work.
Thanks a lot for this. Very handy, was scratching my head for a while about this one. Hurrah for the internet.
Hey Thanks it was every helpful, I want to show same ellipsis in textarea or richtext or richeditabletext is it possible ?
@Vijay – I haven’t been able to figure out a way of doing this with TextArea/RichEditableText. Looks like this solution is currently limited to Label.