3 Replies Latest reply on Sep 18, 2009 8:16 AM by RosieGp

    Flex - autoSize

    RosieGp

      I have textArea component that resizes from default size as the user keep on adding text in it.

      But as the textArea grows i'm unable to see anything after that textArea. How can I push whatever is after the text Area down as TextArea grows...

       

       

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

      <mx:Canvas

       

       

       

      xmlns:mx=http://www.adobe.com/2006/mxml width="656" backgroundColor="0xFFFFFF">

       

       

      <mx:Script>

      <![CDATA[

       

      import mx.events.FlexEvent;

       

       

       

      public function update():

      void

      {

       

       

      if

      (txt.textHeight<30){

      }

       

       

       

      else

      {

      txt.explicitHeight = txt.textHeight + 10;

      }

      }

      ]]>

       

       

       

      </mx:Script>

       

       

       

       

       

       

      <mx:TextArea id="txt" x="33.5" y="130" width="598.5" height="42" text="Description" change="update()"

      />

       

       

      <mx:Button x="33.5" y="145" label="Add New Report" fontWeight="bold" width="105"

      />

       

       

      <mx:Label x="33.5" y="155" text="GM-Chevy"

       

       

      <mx:Label x="33.5" y="165" text="GM-Saturn" fontWeight="bold"

      />

       

       

       

       

       

      <mx:Label x="33.5" y="110" text="GM - Cars in Stock" fontWeight="bold"

      />

       

       

       

       

       

      <mx:Button x="218" y="300" label="Submit"

      />

       

       

       

       

       

      <mx:Button x="347" y="300" label="Clear"

      />

       

      />

        • 1. Re: Flex - autoSize
          Andrew Rosewarn Level 3

          I guess the most simplistic way to hande this is to put your text area in a VBOX with the other controls in a continer inside the VBOX.  That way as your textArea grows the Vbox will automatically layout the children and push the others down.

           

          Andrew

          • 2. Re: Flex - autoSize
            Andrew Rosewarn Level 3

            Example for you

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                <mx:Script>
                    <![CDATA[
                        private function handleChange():void {
                            ta.height = ta.textHeight + 10;
                        }
                    ]]>
                </mx:Script>
               
                <mx:VBox x="41" y="49" height="228" width="263">
                    <mx:TextArea id="ta" width="100%" change="handleChange()"/>
                    <mx:HBox width="100%">
                        <mx:Button label="Button"/>
                        <mx:Button label="Button"/>
                    </mx:HBox>
                </mx:VBox>
               
            </mx:Application>

             

             

            Hope that helps

             

            Andrew

            • 3. Re: Flex - autoSize
              RosieGp Level 1

              Hi Andrew,

              I used VBox and it does work. The inside container that i'm using is HBox. But the problem is no matter where I want to copy a new button it always paste horizontally. Is there any other container that I can use... Like a canvas, Form or panel inside a Vbox. here is what I have

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                  <mx:Script>
                      <![CDATA[
                          private function handleChange():void {
                              ta.height = ta.textHeight + 10;
                          }
                      ]]>
                  </mx:Script>
                 
                  <mx:VBox x="41" y="49" height="228" width="263">
                      <mx:TextArea id="ta" width="100%" change="handleChange()"/>
                      <mx:HBox width="100%">
                          <mx:Button label="Button"/>
                          <mx:Button label="Button"/>

                          <mx:Label text="Happy Birthday " width="115"/>

               

               

               

               

               

               

               

               

                          <mx:Label text="Click Me" fontWeight="bold" width="46"/>

               

               

               

               

                          <mx:TextArea id="txtClickMe" height="21" change="updateClickMe()" width="160"/>

               

               

               

               

                      </mx:HBox>
                  </mx:VBox>
                 
              </mx:Application>