TextArea Automatically Resize
Posted on July 11, 2010 | No Comments
Posting this just on the off-chance someone else ran how do i buy viagra online | buy cialis canadian | cheap levitra generic into the issue and the solutions on the net weren’t up to their needs.
In a project, I’m using a TextArea control because it’s better at displaying images inline using the htmlText property — the Text control completely failed. But once I did this, I kept finding the text getting clipped.
TextArea controls expect that they’ll have a fixed or percentage width and height. Most of the suggestions I’ve seen require the use of getTextMetrics() for the mx_internal textField control of the TextArea. This fails miserably if there is any font sizing or inlined images in the html.
This (placed in creationComplete) works nearly perfectly:
protected function <a href="http://marvabrooks.com/images/">buy levitra online</a> onCreationComplete(event:Event):void
{
//textAreaControl <a href="http://onlineacompliacheap.com ">buying acomplia</a> is the id of the control you want to resize to contain it's text.
textAreaControl.validateNow() ;
textAreaControl.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT ;
textAreaControl.mx_internal::getTextField().validateNow();
textAreaControl.height = textAreaControl.mx_internal::getTextField().height ;
}
It would be just as easy to subclass the TextArea control and apply this on set htmlText().
One minor error with this is that before creationComplete is run, the text is briefly visible in it’s unsized state. If you’re using this in a subclassing situation, no worries, but if you’re applying this from a parent->child situation, you’re going to have to handle the appearance changes (but that’s fairly obvious — just felt it needed qualifying).
Hope that helps someone out.
Update:
Created the class in the comments below, figured I’d update the article:
package us.aut0poietic.controls.text
{
import flash.text.TextFieldAutoSize;
import mx.core.mx_internal;
import mx.controls.TextArea;
public class AutoSizeTextArea extends TextArea
{
public function AutoSizeTextArea()
{
super();
}
override public function set text(value:String):void
{
super.text = value ;
updateSize() ;
}
override public function set htmlText(value:String):void
{
super.data = value ;
updateSize() ;
}
override protected function commitProperties():void
{
super.commitProperties() ;
updateSize() ;
}
protected function updateSize():void
{
if(mx_internal::getTextField() != null)
{
validateNow() ;
mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT ;
mx_internal::getTextField().validateNow();
this.height = mx_internal::getTextField().height ;
}
}
}
}
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.