27 Dec 2004

Can someone please confirm that the TextArea component's scrollbar becomes completely useless when displaying HTML content with images? It bears no relation to the amount of content in the TextArea and the thumb is set to the wrong size. Please, someone tell me I'm not losing my mind! Anyone?

Update: To narrow it down - The scrollbar works correctly when there is one image in the HTML but not when there are two or three.

Update: This is really weird: Same content, 2 different FLAs: The TextArea gets messed up. Another FLA, works perfectly. I'm trying to narrow this down and will report back when I have something. So far, whether or not the TextArea is standalone or part of another movie clip and whether or not it is placed on Stage or attached at runtime do not affect the results.

Update: This is a time-related issue. In identical FLAs, loading the same HTML into the same TextArea component, if I set the frame rate from 1-5 fps, the thumb initializes incorrectly, from frame rate 6 onwards, it initializes correctly. However, it's not just the frame rate but related to the amount of processing that Flash is doing at the time (and hence a time-related issue) as I've seen this happen on a SWF running at 31fps when the textarea is populated at a processor intensive time.

I'm going to start looking for a workaround to force the TextArea to recalibrate itself... I have a few ideas...

Update: Here's the workaround: You need to call myTextArea.invalidate() after you're sure that it has initialized fully with the content. (This causes the TextArea to recalculate everything and redraw itself.) Unfortunately, we don't have any sort of event to listen for that tells us when the TextArea has completely initialized with new content so this becomes mostly guesswork. In my test FLA, calling invalidate() 1 second after setting the text property of the TextArea sufficed at 2fps (at 1fps, 1500 was the minimum that worked.) Of course, this is all time-based so will change depending on how long it takes the TextArea to initialize and that's based on a number of factors including the processor load at the time and the performance of the client machine.

We can file this one under Flash Voodoo, don't you think?

Creative Commons LicenseThe TextArea + HTML + Images == hell? article by Aral Balkan, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial 2.0 UK: England License.

Add Your Comment

Spam Protection by WP-SpamFree

TextArea + HTML + Images == hell?

  1. Make sure you put every tag in a

    tag and that you close the

    tag.

    Seems like the V2 component contain several bugs and haven’t been tested very well before releasing them.

    Hope that helps.

    Christophe

    cherreman
  2. Hi Christophe,

    Thanks for the suggestion. I tried it, but alas, the scrollbar/thumb is still initializing incorrectly. I even went through an diffed all my base classes in mx.core.* and mx.controls.TextArea, etc. to make sure that *I* didn’t mess something up while in one of these files and they all diffed perfectly with the original copies in FirstRun.

    I’m going to try and see if SWFs behave differently but I’m not very optimistic that they will.

    Aral Balkan
  3. It’s not the TextArea’s full fault, but Flash TextField’s. Have you every played around putting images in TextFields? They are, franly, pieces of crystal; they look good initially, but once you modify them, the textfield gets all wonky and whacked out. I’ve had serious issues over the past week, confirmed by reading other reports of serious TextField digging on the net, that Flash textfields have serious rendering issues, caused half in part by invalid HTML, and …well, not sure the other half.

    If you cannot re-write the HTML yourself (if you look at the HTML Flash textfields generate, it’s abhorrent), then yeah, invalidate till the cows come home. I’ve always been lucky with 3 onEnterFrames; your milage may vary.

    JesterXL
  4. dammit.. I just got caught in this hell. I’ve been here before a year or two ago, but haven’t had to deal with this since and I’ve forgotten how to work around it, can’t find the project where I came up with a workaround, etc. I guess this is the stuff that separates the hard core Flash developers from the Java developers who dabble in Flash (the ones I know go crazy over stuff like this and give up).

    mike
  5. I have a similar problem…

    flash 8;
    I load images and text (html) from xml in a the textarea.
    When you scroll that textarea, the image becomes weird; Especially when you put another text ( image) from in the textarea.

    I tried myTextArea.invalidate() but no luck

    any ideas to fix this one?

    jeroen
  6. Has anyone tried this? It’s faster than TextArea.invalidate(). Although I’m not trying to load images into my TextArea, it solved a similar problem I was having:

    TextArea.redraw();

    Forces validation of the object so it is drawn in the current frame.

    http://livedocs.adobe.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00002827.html

    mark
  7. Sorry, wrong link. Click on “TextArea class” under “Related topics” to see a list of all the TextArea’s methods.

    mark
  8. Wow, thanks for the help. This just save me a lot of time!!

    _Andrew Paul Simmons

    Andrew Paul Simmons
  9. Well, in Flex the TextArea dosn’t have a redraw() – Method, right? I solved it just by putting a
    TextArea.htmlText += ” \n”;
    after the TextArea is created. May help sombody. It’s dirty, but It helped me.
    Cheers

    Ralph
  10. same thing in flex, i have done everything that’s on my hands, i have called all the methods for invalidation in the TextArea and even have copied the method sethtmlText in the text area but private methods an properties and even dispatched the dispatchEvent(new Event(”htmlTextChanged”)); and nothing!!!, by now Ralph meke my day with his hack, thanks Ralph!

    epox
  11. THANKS!!!!

    I also had layout problems when loading text and images into a Flex TextArea as htmlText. This post helped me a LOT in finding a solution.

    In my case I want the user to select parts of the text (TextRange) and then color it. This way they can give their opinion about it. (red=bad, green=good).

    Problem is that after ONLY changing the color of the selection, the layout would sometimes change horribly. (Flash Voodoo indeed!)

    The dirty-but-effective +” \n” solution worked like a charm… except ofcourse that after multiple selections I ended up with a LOT of linebreaks at the end of my text.

    So, after playing around with it a bit I tried adding “”, which fixes my layout problems and seems to get stripped away automatically.

    TIP:
    If you want to see how horrible your htmlText in the textfield becomes, just read the htmlText into a normal textfield….

    Paul
  12. Hi Paul –

    This advice is somewhat outdated now — the best way to get Flash HTML to behave is to apply a stylesheet to the text field. Not only did that solve all my formatting problems, it stopped Flash from generating horrible HTML when I spat it out into a normal textfield.

    Jamie
  13. Ok Jamie, thanks for the update.

    I’ll dive into that solution.

    Paul
  14. If you use a tag around the image with a leading property of the image height, then the htmlText.textHeight behaves as it should.

    This is some text.

    Ry
  15. Hello to everyone! IN FACT WE ARE DEALING WITH HELL HERE.

    The problem is definitely the TextFields rather than TextArea itself. I was trying to view an image through some html in an xml file. Everything seemed all right except that the image was invisible, it was there, because I could see the blank space that belong to the size of the image and the text wrapping around but the image was INVISIBLE.

    THE SOLUTION???? Crazy enough. Delete the current textfield and create a brand new one. VOILA! I could see the image.

    I’m just hoping for it not to disappear again. Has anyone a smarter solution??

    Thanks for all your posts, the made me keep the faith.

    Gabriela Portilla
  16. Some help about how to load a html iframe with google maps using textarea flash 8 component please? tks

    civali
  17. Did you see this site?
    http://demo.riamore.net/flexdemo/rMate.html
    The editor of demos is using the Text Layout Framework(http://labs.adobe.com/technologies/textlayout/)
    This demo helped me a lot in finding a solution.

    MYO