1 Reply Latest reply on Aug 31, 2009 12:50 AM by Andrew Rosewarn

    Adapt panel and Text height automatically to the content height

    xkfjvxv

      Hello,

       

      I have a Panel and a Text inside it. The "Text"  receive an htmlText from database so I want the heigt of the Panel and the Text to adapt to the content height automatically.

       

      Regards

        • 1. Re: Adapt panel and Text height automatically to the content height
          Andrew Rosewarn Level 3

          Hi there.

           

          Yea this is odd and I'm working on this too, but your welcome to the code I have to far and if anyone else out there can join in it would be great.  Mine is a custom component, its a canvas with a text area in it.  I think the problem comes here in that there appears to be a bug in the textHeight property of the text area in that it does not return the correct height on its initial pass through the comp lifecycle.  However once it is created and goes through invalidation when you change the text property all is fine.

           

          We're gonna need to get an invliadate and ValidateNow() in there somewhere on the textarea but I haven;t done this yet.  Can anyone join in to help get this finished.

           

          Here's a sample app to illustrate.

           

          Main Application

           

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

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">

                <ns1:SizyBox id="sb" x="38" y="72" width="354" someText="One basic line to start which will not size.?">

                </ns1:SizyBox>

                <mx:Button x="38" y="26" label="One Line" click="{sb.someText = 'This is one line of text'}"/>

                <mx:Button x="164" y="26" label="Two Lines" click="{sb.someText = 'This is one line of text followed by another\nline of text'}"/>

                <mx:Button x="302" y="26" label="Three Lines" click="{sb.someText = 'This is one line of text\nand 2\nand 3'}"/>

          </mx:Application>

           

          Custom Component

           

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

          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"  borderStyle="solid">

                <mx:Script>

                      <![CDATA[

                            private var _someText:String;

                            private var textSet:Boolean;

                    

                            public function set someText(value:String):void {

                                  _someText = value;

                                  textSet = true;

                                  invalidateProperties();

                                  invalidateSize();

                            }

                          

                            public function get someText():String {

                                  return _someText;

                            }

                          

                          

                            override protected function commitProperties():void {

                                  super.commitProperties();

                                  if (textSet) {

                                        textBox.text = _someText;

                                        textSet = false;

                                  }

                            }

                          

                            override protected function measure():void {

                                  super.measure();

                                  measuredHeight = measuredMinHeight = textBox.y + textBox.textHeight + 20;

                                

                                

                            }

                          

                            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

                                  super.updateDisplayList(unscaledWidth,unscaledHeight);

                                  textBox.setActualSize(textBox.width, textBox.textHeight + 10);

                            }

                      ]]>

                </mx:Script>

              

                <mx:TextArea id="textBox" selectable="false" editable="false" borderStyle="solid" y="10" left="10" right="10"/>

          </mx:Canvas>