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.

13 Comments:

Anonymous Mark Wubben said...

Thanks!

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...

Thanks!

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...

情趣用品,情趣用品,情趣用品,情趣用品,情趣,情趣,情趣,情趣,按摩棒,震動按摩棒,微調按摩棒,情趣按摩棒,逼真按摩棒,G點,跳蛋,跳蛋,跳蛋,性感內衣,飛機杯,充氣娃娃,情趣娃娃,角色扮演,性感睡衣,SM,潤滑液,威而柔,香水,精油,芳香精油,自慰套,自慰,性感吊帶襪,吊帶襪,情趣用品加盟AIO交友愛情館,情人歡愉用品,美女視訊,情色交友,視訊交友,辣妹視訊,美女交友,嘟嘟成人網,成人網站,A片,A片下載,免費A片,免費A片下載愛情公寓,情色,舊情人,情色貼圖,情色文學,情色交友,色情聊天室,色情小說,一葉情貼圖片區,情色小說,色情,色情遊戲,情色視訊,情色電影,aio交友愛情館,色情a片,一夜情,辣妹視訊,視訊聊天室,免費視訊聊天,免費視訊,視訊,視訊美女,美女視訊,視訊交友,視訊聊天,免費視訊聊天室,情人視訊網,影音視訊聊天室,視訊交友90739,成人影片,成人交友,美女交友,微風成人,嘟嘟成人網,成人貼圖,成人電影,A片,豆豆聊天室,聊天室,UT聊天室,尋夢園聊天室,男同志聊天室,UT男同志聊天室,聊天室尋夢園,080聊天室,080苗栗人聊天室,6K聊天室,女同志聊天室,小高聊天室,上班族聊天室,080中部人聊天室,同志聊天室,聊天室交友,中部人聊天室,成人聊天室,一夜情聊天室,情色聊天室,寄情築園小遊戲情境坊歡愉用品,情趣用品,成人網站,情人節禮物,情人節,AIO交友愛情館,情色,情色貼圖,情色文學,情色交友,色情聊天室,色情小說,七夕情人節,色情,情色電影,色情網站,辣妹視訊,視訊聊天室,情色視訊,免費視訊聊天,美女視訊,視訊美女,美女交友,美女,情色交友,成人交友,自拍,本土自拍,情人視訊網,視訊交友90739,生日禮物,情色論壇,正妹牆,免費A片下載,AV女優,成人影片,色情A片,成人論壇,情趣,免費成人影片,成人電影,成人影城,愛情公寓,成人影片,保險套,舊情人,微風成人,成人,成人遊戲,成人光碟,色情遊戲,跳蛋,按摩棒,一夜情,男同志聊天室,肛交,口交,性交,援交,免費視訊交友,視訊交友,一葉情貼圖片區,性愛,視訊,視訊聊天,A片,A片下載,免費A片,嘟嘟成人網,寄情築園小遊戲,女同志聊天室,免費視訊聊天室,一夜情聊天室,聊天室

10:25 AM  
Anonymous Anonymous said...

Thanks from Oz!

8:10 PM  
Blogger Benetton said...

牙醫,植牙,假牙|矯正|牙周病,牙醫診所植牙,紋身,刺青,TATTOO,皮膚科,痘痘,雷射脈衝光除斑,洗包包|洗鞋子|清洗包包,中醫,糖尿病,飛梭雷射,肉毒桿菌,玻尿酸,痘痘,脈衝光,醫美,醫學美容,seo,關鍵字行銷,關鍵字自然排序,網路行銷,關鍵字自然排序,關鍵字行銷seo,關鍵字廣告,網路行銷,seo,關鍵字行銷,關鍵字廣告,關鍵字,自然排序,部落格行銷,網路行銷,網路爆紅

3:13 PM  
Blogger as 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