Adding ellipsis points in a TextArea component in Flex

admin — Fri, 15 Jan 2010 14:55:12 +0000

The goal here is to use a TextArea component to display some text that doesn't quite fit in the specified region and ellipsis points (...) should be showed to let user know the text is trimmed. Standard stuff right ? But Flex doesn't do it by itself and I thought someone might look for this.

My problem was with a Flex app that uses i18n and in some languages the text didn't fit the box, the scroll bar policy was off and user had no idea there was more text in there and didn't had the possibility to scroll further. Anyway, here it is :

	<mx :Script>
		< ![CDATA[
 
			[Bindable]
			private var text : String = 'The quick brown fox jumped over the lazy dog. ' +
						    'The quick brown fox jumped over the lazy dog. ' +
						    'The quick brown fox jumped over the lazy dog. ' +
						    'The quick brown fox jumped over the lazy dog. ' +
						    'The quick brown fox jumped over the lazy dog. ';
 
			private function trim(text : String) : String 
			{
				box.text = text;
				box.validateNow();
				if(box.maxVerticalScrollPosition > 0) {
					text = text.replace("...", "");
					text = text.substr(0, text.length - 1) + "...";
				} else {
					return text
				}
				return trim(text);	
			}
 
		]]>
	mx>
 
	<mx :TextArea id="box"
		verticalScrollPolicy="off"
		width="250"
		height="50"
		wordWrap="true"	
		text="{trim(this.text)}"
		paddingBottom="0"	
		editable="false" />

ADM Blog » points

Adding ellipsis points in a TextArea component in Flex