Skip to main content
Inspiring
June 2, 2010
Answered

Padding on top of <img> tags imported to TextFlow

  • June 2, 2010
  • 1 reply
  • 1252 views

I'm trying to use an external HTML data source with the Spark RichEditableText control, and it has the following structure:

<p>My wrapping text here.</p><img id="picture1" src="image1.png" /><img id="picture2" src="image2.png" /><p>More text...</p>

I'm noticing a large gap above my <img> tags when rendered in the RichEditableText control. Anyone know how I can control the padding on top of <img> elements that are specified in external HTML and imported using TextFlow.importToFlow() ? This also might be a rendering bug, because I can see the text rewrap on initialization, and it's as if the control is leaving the once occupied space still empty and not moving the <img> elements up along the y axis. Many thanks in advance.

This topic has been closed for replies.
Correct answer rdermer

Richard, thanks for the reply. I tried your suggestion, but it didn't seem to help. I've recreated with a simple MXML test:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

<s:RichEditableText width="890" height="600" whiteSpaceCollapse="collapse" fontSize="18">

     <s:TextFlow whiteSpaceCollapse="collapse">

          <s:p>

          The secondary survey of this patient reveals he has suffered two major penetrating shrapnel injuries just below the right eye and right parietal scalp region. He also has minor shrapnel wounds to his left forearm, right deltoid region, and right cheek.

          </s:p>

          <s:div tabStops="0 350">

               <s:img source="http://flashsupport.com/images/waterfall.png/>

               <s:tab />

               <s:img source="http://flashsupport.com/images/waterfall.png" />

               <s:br/>

               Left deltoid injury

               <s:tab />

               Right deltoid injury

         </s:div>

     </s:TextFlow>

</s:RichEditableText>

</s:Application>

(The padding occurs with or without the <s:div>, but I thought you should see what I'm ultimately trying to accomplish.)
thanks again for your help!
-Robert
p.s. thank you to peter dehaan for the tabstops help!


The default lineHeight is the maximum of 120% of the fontSize of the fontSize of the elements on the line.  The height of InLineGraphicElements is treated as the fontSize of the ILG elements.  Modify your InlineGraphicElement tags like this and you won't get any extra space.

<img source="http://flashsupport.com/images/waterfall.png"  lineHeight="100%"/>

Hope that helps,

Richard

1 reply

Inspiring
June 3, 2010

Quick update: I was able to adjust baselineShift with a hunt for <img> containers, and move it up on the Y axis that way, and it's good enough for now, but surely there's a style that can affect this too?

Adobe Employee
June 3, 2010

For container.firstBaseLineOffset try use ascent instead of lineHeight.  auto is the default and should give you ascent for roman text.  Maybe flex changes the default.

Richard

Inspiring
June 3, 2010

Richard, thanks for the reply. I tried your suggestion, but it didn't seem to help. I've recreated with a simple MXML test:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

<s:RichEditableText width="890" height="600" whiteSpaceCollapse="collapse" fontSize="18">

     <s:TextFlow whiteSpaceCollapse="collapse">

          <s:p>

          The secondary survey of this patient reveals he has suffered two major penetrating shrapnel injuries just below the right eye and right parietal scalp region. He also has minor shrapnel wounds to his left forearm, right deltoid region, and right cheek.

          </s:p>

          <s:div tabStops="0 350">

               <s:img source="http://flashsupport.com/images/waterfall.png/>

               <s:tab />

               <s:img source="http://flashsupport.com/images/waterfall.png" />

               <s:br/>

               Left deltoid injury

               <s:tab />

               Right deltoid injury

         </s:div>

     </s:TextFlow>

</s:RichEditableText>

</s:Application>

(The padding occurs with or without the <s:div>, but I thought you should see what I'm ultimately trying to accomplish.)
thanks again for your help!
-Robert
p.s. thank you to peter dehaan for the tabstops help!