0 Replies Latest reply on Apr 3, 2012 11:38 AM by EricJ32

    Problem with contentHeight of RichEditableText?

    EricJ32 Level 1

      Hi.

       

      I'm trying to put links in a RichEditableText control which will link to a location within the same control, so clicking on it makes it scroll to the relevant position. What I have done seems to work when there are no images in the textFlow, but as soon as I include them, it doesn't calculate the contentHeight of the control correctly.

       

      So, it looks a little like this:

       

      <s:Scroller width="300" height="300">

       

      <s:RichEditableText id="richText"

                                                                  width="100%"

                                                                  editable="false" selectable="false">

        <s:textFlow>

        <s:TextFlow>

        <s:p styleName='informationSectionHeader'>header</s:p>

        <s:p styleName='informationLink'><s:a href='event:goto_section1'>Link 1</s:a></s:p>

        <s:p styleName='informationLink'><s:a href='event:goto_section2'>Link 2</s:a></s:p>

        <s:p styleName='informationLink'><s:a href='event:goto_section3'>Link 3</s:a></s:p>

        <s:p styleName='informationLink'><s:a href='event:goto_section4'>Link 4</s:a></s:p>

        <s:p>...</s:p>

                                              <s:p id='section1' styleName='informationSubHeader'>Section 1</s:p>

        <s:p>...</s:p>

        <s:p>...</s:p>

                                              <s:p id='section2' styleName='informationSubHeader'>Section 2</s:p>

        <s:p>...</s:p>

        <s:img source="@Embed('/assets/graphics/Image1.png')" height='333' width='407' />

        <s:img source="@Embed('/assets/graphics/Image2.png')" height='333' width='408' />

                                              <s:p id='section3' styleName='informationSubHeader'>Section 3</s:p>

        <s:p>...</s:p>

        <s:img source="@Embed('/assets/graphics/Image3.png')" height='146' width='507' />

                                              <s:p id='section4' styleName='informationSubHeader'>Section 4</s:p>

        <s:p>...</s:p>

        </s:TextFlow>

        </s:textFlow>

        </s:RichEditableText>

       

      </s:Scroller>

       

      I set up a click handler for the links, which fires this method - basically get the id of the paragraph we want to show, then loop through all the lines in the flowComposer and if the ids match, scroll to that position:

       

      protected function clickHandler(event:FlowElementMouseEvent):void

                                    {

                                              if(event.flowElement is LinkElement)

                                              {

                                                        var link:LinkElement = event.flowElement as LinkElement;

       

                                                        if(link.href.substr(0,11) == "event:goto_")

                                                        {

                                                                  var id:String = link.href.substr(11);

       

                                                                  for each(var tfl:TextFlowLine in StandardFlowComposer(richText.textFlow.flowComposer).lines)

                                                                  {

       

                                                                            if(tfl.paragraph.id == id)

                                                                            {

                                                                                      richText.verticalScrollPosition = tfl.y;

       

                                                                                      break;

                                                                            }

       

                                                                  }

       

                                                        }

                                              }

                                    }

       

      Note: I've cut all my text out of the above textFlow, obviously to reduce space here, but altogether, the height of the content is actually around 3000px.

       

      Now, this works for short pages of text, where there's no images. However, with the above textFlow (with content), when I click on one of the later links, the scrollbar doesn't go to the correct location. In fact, when I inspect the richText control, it tells me the contentHeight is 1300px, when it is actually more than 3000!!

       

      I have even tried ignoring the y-value of the TextFlowLine and simply put in code that says every time I click on a link, scroll to 100 more than I did on the previous click (see code below), it still never programatically scrolls past the 1300px mark, so the scrollbar thumb is showing about half-way down.

       

      private var scrollTo:int = 100;

       

                                    protected function clickHandler(event:FlowElementMouseEvent):void

                                    {

                                              richText.verticalScrollPosition = scrollTo;

                                              scrollTo += 100;

                                    }

       

      Does anyone have any idea of why the contentHeight is wrong, and how I can correct it?

       

      Thanks!