4 Replies Latest reply on Oct 29, 2010 10:28 AM by Flex harUI

    RichEditableText: Problem with percentWidth and resizeEffect of parent container

    pusti3000

      Hi folks

       

      I'm having this very strange bug with RichEditableText and trying to fix this for days, hope someone can help me to finally figure this out.

       

      So I'm having a simple RichEditableText instance within a SkinnableContainer. The SkinnableContainer has resizeEffect="Resize" set, the RichEditableText has a width ="100%". If I'm changing the text from a short string to a string containing much more characters, the RichEditableText resizes. Unfortunately, the resizeEffect of the outer container doesn't work properly, it's kind of flickering. I think it's because the RichEditableText is measuring twice, as the percentHeight is known only until display update after the text has been initially measured...?

       

      Any ideas how to fix this? I would be so glad if somebody could help me... it's really getting me crazy.

       

      Here's the code:

       

      <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>
         
          <fx:Script>
              <![CDATA[
                  import mx.events.EffectEvent;
                 
                  import spark.components.RichEditableText;
                 
                  protected function togglebutton1_clickHandler(event:MouseEvent):void
                  {
                      if(button.selected)
                      {
                          txt.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. s.";
                         
                      } else {
                         
                          txt.text = "dipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. "               
                      }
                  }
         
          <s:layout>
              <s:VerticalLayout gap="20" />
          </s:layout>
         
          <s:ToggleButton id="button" label="toggle height" click="togglebutton1_clickHandler(event)" />
         
          <s:SkinnableContainer id="content"
                                width="400"
                                resizeEffect="Resize"
                                backgroundColor="red"
                                top="30"
                                left="30"
                                bottom="30"
                                right="30"
                                >
              <s:RichEditableText id="txt" width="100%" />
             
          </s:SkinnableContainer>
         
      </s:Application>