Images in RichText-Control

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Images in RichText-Control

chris_flex
Hi,

when I put html-code with an image in a RichtText-Control there is a huge
space between the text and the image (above the image but not below).

Where/how can I set these spacings/paddings?



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Images in RichText-Control

Erik J. Thomas
This is an old example but still valid (I believe):

https://help.adobe.com/en_US/flex/using/WS02f7d8d4857b1677-165a04e1126951a2d98-7ff2.html

I believe you just set the padding or margin style on the textFlow paragraph child that contains your image like you would any inline style, e.g., setStyle("padding", ...);

A little searching on the web for examples and you should find what you need. Remember that using RichText is pretty heavyweight and it's not that easy to use, if you use primitives directly, but if you use the html importer it can be easy but styling is harder then.

Erik

On Jan 5, 2018, at 12:12 PM, chris_flex <[hidden email]> wrote:

Hi,

when I put html-code with an image in a RichtText-Control there is a huge
space between the text and the image (above the image but not below).

Where/how can I set these spacings/paddings?



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/


Reply | Threaded
Open this post in threaded view
|

Re: Images in RichText-Control

chris_flex
This post was updated on .
Sorry - I think I missed to mention that I am using HTML-Text which I am
importing:

TextConverter.importToFlow(htmlText,  TextConverter.TEXT_FIELD_HTML_FORMAT);

The text is:

"<p>Here some Text with an image
<https://www.lidl.de/imgs/newsletteranmeldung.jpg>  and more Text. And more
Text.</p><p>Here some Text with an image
<https://www.lidl.de/imgs/newsletteranmeldung.jpg>  and more Text. and more
Text.</p>"

Is it possible to remove the spacing there...

<http://apache-flex-users.2333346.n4.nabble.com/file/t605/test.png



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Images in RichText-Control

chris_flex
Is there any way to set/remove this huge space above the image in some way? I
still haven't found a solution for this but as images are allowed in the
RichText there must/should be some more or less trivial solution.... or am I
wrong...



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Images in RichText-Control

Alex Harui-2
What does the the converter produce?  I'm wondering if it is seeing
line-breaks and stuff like that.

-Alex

On 1/12/18, 4:58 AM, "chris_flex" <[hidden email]> wrote:

>Is there any way to set/remove this huge space above the image in some
>way? I
>still haven't found a solution for this but as images are allowed in the
>RichText there must/should be some more or less trivial solution.... or
>am I
>wrong...
>
>
>
>--
>Sent from:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-fle
>x-users.2333346.n4.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7C74019
>70b2838497cb3be08d559bc3aea%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6
>36513587341570144&sdata=%2Bhzsx11KVYDptqsZiH7gEB2W20kbAXoz2iqfXHLnjxY%3D&r
>eserved=0

Reply | Threaded
Open this post in threaded view
|

Re: Images in RichText-Control

chris_flex
This post was updated on .
Hi Alex,

what exactly do mean... the elements it produces?

I also found out the following:
The size of the gap/space depends on the height of the imave.
This text from the resource file:
test=<p>This is a Test... This is a test... </p><img src='https://www.lidl.de/imgs/newsletteranmeldung.jpg' /><p>This is a test... This is a test... </p><p>This is a Test... This is a test... </p><img width="200" height="100" src='https://www.lidl.de/imgs/newsletteranmeldung.jpg' /><p>This is a test... This is a test... </p><p>This is a Test... This is a test... </p><img width="200" height="200" src='https://www.lidl.de/imgs/newsletteranmeldung.jpg' /><p>This is a test... This is a test... </p><p>This is a Test... This is a test... </p><img width="200" height="400"  src='https://www.lidl.de/imgs/newsletteranmeldung.jpg' /><p>This is a test... This is a test... </p><p>This is a Test... This is a test... <img width="400" height="600" src='https://www.lidl.de/imgs/newsletteranmeldung.jpg' />This is a test... This is a test... </p><p>This is a Test... This is a test... <img width="1200" height="1800" src='https://www.lidl.de/imgs/newsletteranmeldung.jpg' />This is a test... This is a test... </p>

produces this

<http://apache-flex-users.2333346.n4.nabble.com/file/t605/test.png

And an other strage thing - in a test project I first did not define the
width and height the image was not displayed - and in the original project
it shows the image in the original size when the image is loaded before
rendering - else it is not displayed...



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Images in RichText-Control

Alex Harui-2
Hi Chris,

It looked like you were sending HTML through one of the converters.  IIRC,
that produces a TextFlow, and RichText/TLF renders the TextFlow, not HTML.
 So if the converter added extra whitespace in the TextFlow, that would be
a problem in the converter.  If a known simple TextFlow doesn't render the
image properly, then the issue is in the TLF rendering of the TextFlow.

It could be that there is a problem with the scale or size of the image
and the converter may not know what size to give it.

HTH,
-Alex

On 1/12/18, 10:56 AM, "chris_flex" <[hidden email]> wrote:

>Hi Alex,
>
>what exactly do mean... the elements it produces?
>
>I also found out the following:
>The size of the gap/space depends on the height of the imave.
>This text from the resource file:
>
>
>produces this
>
><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-fl
>ex-users.2333346.n4.nabble.com%2Ffile%2Ft605%2Ftest.png&data=02%7C01%7Caha
>rui%40adobe.com%7C375b14784f1748464a4308d559ee3cba%7Cfa7b1b5a7b34438794aed
>2c178decee1%7C0%7C0%7C636513802113021733&sdata=9byOa%2BrI%2B7qTMGE0noBj%2B
>tk7JW1qs7NuIb%2Bz%2B%2FKisyU%3D&reserved=0>
>
>And an other strage thing - in a test project I first did not define the
>width and height the image was not displayed - and in the original project
>it shows the image in the original size when the image is loaded before
>rendering - else it is not displayed...
>
>
>
>--
>Sent from:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-fle
>x-users.2333346.n4.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7C375b1
>4784f1748464a4308d559ee3cba%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6
>36513802113021733&sdata=5AI%2B%2FN9KEaNe5S5MnDgXFP5ZmOhwS21Qo0sSxREz%2BvE%
>3D&reserved=0

Reply | Threaded
Open this post in threaded view
|

Re: Images in RichText-Control

chris_flex
This post was updated on .
Hi Alex,

this solves the problem... the problem is the default lineHeight of 120%...
But is this the way to go?


private function setTextFlow():void {
            var htmlText:String = resourceManager.getString("TestProperties", "test");
            test.textFlow = TextConverter.importToFlow(htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT);
            test.textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE, sizeGraphic);
        }

private function sizeGraphic(e:StatusChangeEvent):void {
            trace("status: " + e.status);
            if (e.status == "ready" || e.status == "sizePending") {
                var ige:InlineGraphicElement;
                if(ige = e.element as InlineGraphicElement)
                {
                    if(ige.height == 0)
                    {
                        ige.height = ige.measuredHeight;
                        ige.width = ige.measuredWidth;
                    }
                    if(!isNaN(ige.measuredHeight))
                    {
                        ige.lineHeight = ige.measuredHeight + 10;
                    }
                }
            }
        }




--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Images in RichText-Control

Alex Harui-2
Hi Chris,

I don't know that part of TLF to give an educated answer.  Maybe Harbs or
someone else knows better.

I looked up CSS line-height and it seemed to say that Firefox is using
120%.  Did you verify that the space really is due to the correct
calculation of 120%?  Maybe it is actually resulting in 180% or so.  One
way to test would be to see what FireFox does.  There could be some
line-height exemption for images in pure HTML/CSS.

HTH,
-Alex

On 1/12/18, 11:38 AM, "chris_flex" <[hidden email]> wrote:

>Hi Alex,
>
>this solves the problem... the problem is the default lineHeight of
>120%...
>But is this the way to go?
>
>
>
>
>
>--
>Sent from:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-fle
>x-users.2333346.n4.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7C2da4b
>bb2d0bd498d64be08d559f4006b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6
>36513827002468218&sdata=9khNXWLv3K%2Fp%2BsY5tiHnmGEKltwz6w11xpuQ8AG3Kos%3D
>&reserved=0