Flex htmlText with full width image cuts characters off

Question

My mx:Text's htmlText is the following:

mainText.htmlText = "<img src=\"breadmaker.png\" width=\"339\" height=\"275\" vspace=\"0\" hspace=\"0\" \/>" + "Lorem Ipsum is simply dummy tex......(more here)"

However, the result looks like the following:

Screenshot

As you can tell, it cuts off the first few characters in the text after the image tag (Lorem Ipsum is sim), but it is only because the image is full width. If I change the img tag to width=\"200\", it shows the text floating to the right.

However, as you can tell with a full width image (because the Text component's width is 339), it seems the text is still floating to the right, but it's hidden off to the right side of the image.

Any help?

Answer 1

What I ended up doing was determining if it was a full width image, and adding an actual <mx:Image> to the vbox. When I request the htmlText from the element, I simply run something like this:

if( fullWidthImage )
    return "<p>"+imageString+"</p>"+body;
else
    return body;

That way, the element itself returns the image wrapped in the body for a non full width image, but I make sure it is not included in a full width image until I need it there.

Answer 2

HtmlText property is not very reliable when displaying HTML content. Adobe even has a note about img tag not being fully supported.

But if you're trying to get your text under you image, try to put them both in different paragraphs (p tag).

Alternatively you can check out Alex Harui's blog post from 3 years ago. He had at that point an HTML implementation that I found better for my purposes than the htmlText property.