February 17, 2007

Text control with truncateToFit property support

As you probably know, Label control supports truncateToFit property, while Text doesn't. Even if you explicitly set it to true in your particular Text instance, nothing happens. I have created TruncatedText class that acts the similar way as Label does. If a TruncatedText instance is sized to be smaller than its text, the text is truncated with "...":

31 comments:

Bruce Denham said...

I can't seem to get your TruncateText class to render a tooltip when used as an itemRenderer within a grid. Is there something I'm missing?

Best,
Bruce

Sergey Kovalyov said...

Bruce, could you please send me your code example and I will try to help you if possible.

Greg C. said...

Thanks loads for this, Sergey - you saved me from a massive headache! :)

cyprian.pl said...

Here is a short snippet how to add a tooltip to this component:

if (truncationRequired) {
toolTip = originalText;
[original code]
} else { toolTip = "";
}

HTH!

cheers,
Cyprian

Alex Cook said...

A sample of this actually working would be nice...

I couldn't get it to work, does it only work when you put the text in at compile time and not dynamically at runtime?

Sergey Kovalyov said...

Alex, it works. I have just verified it once again. Probably, you have just forgotten to define the width and height. When the size is undefined, the component sizes itself according to the content.

Jay Wood said...

Awesome, Sergey! This was exactly what I needed. Thank you for saving me a lot of time.

Bill said...

Works a treat - Cheers Sergey

Igor Gaidaichuk said...

Hi Sergey, I was really surprised when I realized that its your blog )))
See You in the office )))

Sergey Kovalyov said...

:-)

Steve said...

I apologize for being dense, but how can I use this in my mxml layout? Is the only way to use this in Actionscript via addChild?

I have a standard mxml text component I'd rather replace with this. Thanks.

Sergey Kovalyov said...

You can instantiate it both in MXML and ActionScript.

Jay Wood said...

I am curious why truncation is disabled for html text? I bypassed the test for _isHtml in updateDisplayList, and it seems to work just fine for both html and plain text.

Sergey Kovalyov said...

Because binary text splitting could result into wrong opened and closed tags sequence in HTML text.

Jay Wood said...

Valid point... Flash player does not seem to mind a missing or truncated end tag, but a truncated entity looks strange... e.g., "&" truncated to "&am" shows up as "&am" in the rendered text.

Patrick Calahan said...

Thanks very much - works beautifully.

Aishek said...

Sergey, Thanks a lot!
Component works great!

Ahmad said...

protected function get truncationRequired() : Boolean {
return (textField.height < textField.textHeight + UITextField.TEXT_HEIGHT_PADDING);
}

how would this work!! we should be testing if the width exceeds the width of the component! how is height related .. this did not work at all with me

Sergey Kovalyov said...

Ahmad, I check for the height, because it's all about multiline text.

Ahmad Khudairy said...

hi sergey. Thanks for ur reply .. yeah i got it later after i posted the comment :)

I was actually looking for something else .. but this is a cool component as well

Andy Noton said...

Hi Sergey, thanks very much for this, it's a great help. I had one small problem in that the text did not word wrap on the first time the object was shown, could be because in my case the height was set dynamically by top and bottom styles? I fixed it with the following change to the truncationRequired function:

protected function truncationRequired(h: Number) : Boolean
{
return (h < textField.textHeight + UITextField.TEXT_HEIGHT_PADDING);
}

and pass in h from updateDisplayList(w, h).

Drcacho said...

it works perfect! Also the tooltip fix.

Thank you very much from Spain

Latha said...

Sergey.. thanks a ton for the component.. was very helpful and worked great!

Quinn said...

Great work Sergey...saved my Sunday for me :)

Emil.Atanasov said...

Text control works fine. Thanks.

Anonymous said...

I had some scrolling problems in a datagrid using this Text control as itemRenderer.
The problem was, while scrolling, the height shrinked, because it was clipped by the grid and eventually got 0.
This led to strange scrolling behavior.

I do this check for maxHeight in truncationRequired now (can of course lead to undesired behavior when using this control somewhere else):

protected function truncationRequired(h:Number):Boolean
{
return (h === maxHeight && h < textField.textHeight + UITextField.TEXT_HEIGHT_PADDING);
}

Anonymous said...

I just figured out, this would be better (only make the check if maxHeight is set):

protected function truncationRequired(h:Number):Boolean
{
return ((!isNaN(explicitMaxHeight) && h === explicitMaxHeight || isNaN(explicitMaxHeight)) && h < textField.textHeight + UITextField.TEXT_HEIGHT_PADDING);
}

Shubhra Bhushan said...

Thanks Sergey. You saved a huge problem I have been facing for sometime in the textarea!

Anonymous said...

Awesomely simple solution for a big problem! Thanks!

Anonymous said...

I was having this problem (http://skovalyov.blogspot.com/2006/12/setting-very-long-string-to-text.html) and this solution worked for me. Thanks!

Darshan Gopinath said...

Thanks a lot Sergey!! Absolutely fantastic. Just a minor note.....in order to change the component to an editable TextArea from Text, extend the class to a TextArea and just remove the truncateToFit lines. I had a resizable TextArea and wanted to truncate the text as it was resized. Your code proved to be brilliant. Thanks again mate!! :)