Monday, June 19, 2006

Flash Bug - Contents of TextField w/autoSize = true Scroll When Selected

This one's for Mark Wubben of SIFR fame -

When you create a multiline TextField and set its autoSize = true, the TextField should expand to accomodate its contents, and the contents should not scroll when selected by clicking and dragging within the text field. However, sometimes when you select the text, it scrolls and the top gets chopped off. This seems to happen most frequently when the mouse exits the TextField at the bottom edge, rather than the right edge.

The best solution I have found for this is not to use the autoSize property at all, but rather to simulate it, and add a little extra height:

myTextField._height = myTextField.textHeight + 7;

7 seems to be the magic number. This is just enough extra padding to prevent the scrolling, and is only a pixel or two taller than the autoSize = true version. 7 seems pretty aribitrary, and the difference between the autoSized TextField and the non-autoSized TextField varys with font face and font size. So, I use 10px to be on the safe side. I've tested this with a lot of different font faces and sizes, and it hasn't failed me yet. To maintain an accurate visual representation, I subtract 10px from the height of the containing object (in the case of SWF Headings, its the ActiveX object or plugin, but it could also be a masked movieclip).

Here's a test case, and the source as well.

[Edit: in the test case, the TextField on the left is autoSize = true, the one on the right has the workaround applied ]

Was this post helpful to you? If so, please consider making a small donation to keep this blog going.


Anonymous Mark Wubben said...


12:22 AM  
Anonymous Mark Wubben said...

Unfortunately this didn't work for sIFR. For some reason Flash always wanted to scroll the textfield by one line if it contained multiple lines. As a workaround I added the font size to the textfield height, but not to the movie height.

6:02 PM  
Blogger tom said...

It definitely needs more testing, to account for a lot of different scenarios. For example, does the amount you have to the TextField depend on line spacing or other font metrics, and what about the size of any glows, blurs or bevels? I'm going to be doing some more testing to try to nail down the exact factors involved, and I'll post my findings as soon as I can.

3:48 PM  
Anonymous Mark Wubben said...

What I meant is that no matter the autoSize setting, it would scroll if there was more than one line of text being rendered.

6:36 PM  
Blogger tom said...

Right. It sounds like our fix is essentially the same - I'm adding 10px to the height of the text field, while you're adding the font size. The thing that's nagging at my mind about this is, what if the font happens to have a really long descender, or a huge glow around it? Would the fix still work, or would the amount added to the TextField height have to increase to accomodate those cases?

6:51 PM  
Blogger tom said...

I did some more testing on this... Tried a ton of different fonts, faces, styles, etc... The magic number still seems to be 7 - if you add 7px to the height of the TextField, it will not scroll, regardless of descender length or anything else. Why 7px, I have no idea. Any thoughts?

8:46 PM  
Anonymous Mark Wubben said...

Indeed, sIFR adds a 5px bottom padding, then if I add another two px to the height of the TextField it no longer scrolls. (I found I needed to add that padding to make the text fit precisely in the movie)

No idea about the magic 7 though...

9:09 PM  
Anonymous Thermage said...

Great and excellent article ts realy helpful. Thanks again.

11:43 AM  
Blogger Dave said...


I was having a problem autoSize and htmlText ... for some reason any word with [b] or [i] tags were freaking out my text field.

All fixed. Thanks

7:40 PM  
Anonymous Anonymous said...


10:25 AM  
Anonymous Anonymous said...

Thanks from Oz!

8:10 PM  
Anonymous Anonymous said...


3:13 PM  
Anonymous Anonymous said...

I like your blog. Thank you. They are really great . Ermunterung ++ .
Some new style Puma Speed is in fashion this year.
chaussure puma is Puma shoes in french . Many Franzose like seach “chaussure sport” by the internet when they need buy the Puma Shoes Or nike max shoes. The information age is really convenient .

By the way ,the nike max ltd is really good NIKE air shoes ,don’t forget buy the puma mens shoes and nike air max ltd by the internet when you need them . Do you know Nike Air Shoes is a best Air Shoes . another kinds of Nike shoes is better . For example , Nike Air Rift is good and Cheap Nike Shoes .the nike shox shoes is fitting to running.

Spring is coming, Do you think this season is not for Ugg Boots? maybe yes .but this season is best time that can buy the cheap ugg boots. Many sellers are selling discounted. Do not miss . Please view my fc2 blog and hair straighteners blog.
.thank you .

I like orange converse shoes ,I like to buy the cheap converse shoes by the internet shop . the puma shoes and the adidas shoes (or addidas shoes) are more on internet shop .i can buy the cheap nike shoes and cheap puma shoes online. It’s really convenient.
Many persons more like Puma basket shoes than nike air rift shoes . the Puma Cat shoes is a kind of Cheap Puma Shoes .
If you want to buy the Cheap Nike Air shoes ,you can buy them online. They are same as the Nike Air shoes authorized shop. Very high-caliber Air shoes and puma cat shoes . the cheap puma shoes as same as other.

polo shirts

ralph lauren polo shirts
chaussure puma

chaussure sport

chaussures puma

puma CAT

ed hardy clothing

ed hardy clothes

ed hardy womens

ed hardy sunglasses

ugg boots

cheap ugg boots

1:34 AM  

Post a Comment

Links to this post:

Create a Link

<< Home