I find that in some Flex apps you simply don't have enough room to display all the data in the allotted space. Here's something that I feel is a nice compromise - I truncate the data to the desired size, add some ellipses (as a visual clue that the data is abbreviated), and use the toolTip to display the entire data field.
Try It
Here's the sample code:
AS Code:
var sCompany:String = 'This Really Long Company Name Takes Up Too Much Space';
function abbrevi(sText) {
var CoName:String = sText;
var tmpCoNameLetter:String = '';
var tmpCoNameWord:String = '';
if (CoName.length > 23) {
CoName = CoName.toLowerCase();
tmpCoNameWord = CoName.substring(0, 1).toUpperCase();
//mx.controls.Alert.show(CoName);
var N:Number = (CoName.length);
for(var i=1; i<N; ++i) {
tmpCoNameLetter = CoName.substring(i, i+1);
if (tmpCoNameLetter == " ") {
tmpCoNameLetter = ' ' + CoName.substring(i, i+2).toUpperCase();
i++
}
tmpCoNameWord = tmpCoNameWord + tmpCoNameLetter;
}
sText = tmpCoNameWord.substring(0, 22) + '...';
} else {
sText = CoName;
}
return sText;
}
MXML Code:
<mx:TextInput id="tiCompany" text="{abbrevi(sCompany)}" toolTip="{sCompany}" />
* Update - Kevin Hoyt has an example of taking this idea to the next level here. |