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 ]
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 ]
posted by tom at 3:37 PM
10 Comments:
Thanks!
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.
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.
What I meant is that no matter the autoSize setting, it would scroll if there was more than one line of text being rendered.
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?
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?
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...
Great and excellent article ts realy helpful. Thanks again.
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
Thanks from Oz!
Post a Comment
<< Home