Recipe 9.10. Sizing Text Fields to Fit Contents


Problem

You want to size a text field's viewable area to fit the text it contains.

Solution

Use the autoSize property.

Discussion

You can set the autoSize property of a text field so it automatically resizes itself in order to fit its contents. The possible values for autoSize are the RIGHT, LEFT, CENTER, and NONE constants of the flash.text.TextFieldAutoSize class. By default, autoSize is set to NONE, meaning that the text field does not automatically resize.

Set the property to LEFT if you want the text field to resize while fixing the upper-left corner's position. In other words, the text field's lower-right corner is the point that moves when it expands and contracts:

// These two lines do the same thing field.autoSize = TextFieldAutoSize.LEFT; field.autoSize = true;

Set the property to CENTER if you want the text field to be anchored at its center point. While the top of the object remains fixed, it expands and contracts downward and equally to the right and left:

field.autoSize = TextFieldAutoSize.CENTER;

Set the property to RIGHT if you want the upper-right corner of the text field to remain steady while the object expands and contracts in the direction of the lower-left corner:

field.autoSize = TextFieldAutoSize.RIGHT;

When wordWrap is set to false (the default), then the text field expands horizontally to accommodate the text. In such a case, the text field expands vertically only if there are newlines within the text assigned to the text field. The following example illustrates a text field that auto sizes to accommodate all the text on one line:

var field:TextField = new TextField(  ); field.autoSize = TextFieldAutoSize.LEFT; field.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor purus, aliquet a, ornare ac, suscipit a, est. Nullam hendrerit molestie erat. Nunc nulla tortor, ullamcorper et, elementum vel, fringilla sed, dui. Praesent fermentum interdum orci."; addChild(field);

The following adds a newline character to the text assigned to the text field so that it auto sizes to display all the text on two lines:

var field:TextField = new TextField(  ); field.autoSize = TextFieldAutoSize.LEFT; field.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor purus, aliquet a, ornare ac, suscipit a, est."; field.text += "\n"; field.text += "Nullam hendrerit molestie erat. Nunc nulla tortor, ullamcorper et, elementum vel, fringilla sed, dui. Praesent fermentum interdum orci."; addChild(field);

When wordWrap is set to TRue, then the text field never expands beyond the value of the width property (100 by default). If necessary, the text automatically wraps to a new line if autoSize is set to RIGHT, LEFT, or CENTER:

var field:TextField = new TextField(  ); field.autoSize = TextFieldAutoSize.LEFT; field.wordWrap = true; field.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor purus, aliquet a, ornare ac, suscipit a, est. Nullam hendrerit molestie erat. Nunc nulla tortor, ullamcorper et, elementum vel, fringilla sed, dui. Praesent fermentum interdum orci."; addChild(field);

See Also

Recipe 9.6




ActionScript 3. 0 Cookbook
ActionScript 3.0 Cookbook: Solutions for Flash Platform and Flex Application Developers
ISBN: 0596526954
EAN: 2147483647
Year: 2007
Pages: 351

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net