5 Replies Latest reply on Dec 13, 2009 11:29 PM by flx23

    Increase text area width by typing text in it

    flx23

      Hi all,

       

      I am using a text area i have set its wordwrap property false and horozontal and vertical policy off..What i want is to increase the width or height of text area depending upon the text i am writing

      if  the text is going to increase more than the width of text area the width of text area should adjust itself according to that..

       

      Take a look to the below example

       

      text area text:-

       

      "this is text example"

       

      text area width:-100

       

      now as the word wrap property is off the text will come upto this for width of 100px:-

      "this is text"

       

      The moment i press the next character to type..the text area width should increase according to that ..the width should increase side by side

      Is there any event for this via which i can get this done

       

      Thanks

        • 1. Re: Increase text area width by typing text in it
          Matt Le Fevre Level 4

          you do a check function on the text area change event.

           

          <mx:TextArea change="checkLength()"/>
          

           

          check how many characters there are in the textarea, and then adjust size accordingly.

          • 2. Re: Increase text area width by typing text in it
            Gregory Lafrance Level 6

            I extended TextArea and it works well as a standalone component, but it might not work so well if you use it as an itemRenderer, like in a DataGrid.

             

            I created a Flex Cookbook post on the topic:

             

            http://cookbooks.adobe.com/post_I_want_a_TextArea_that_will_act_like_a_TextInput_t-16596.h tml

             

            If this post answers your question or helps, please mark it as such.


            Greg Lafrance
            www.ChikaraDev.com

            Flex Development and Support Services

            ------------------------ DynamicWidthTextArea.as -----------------------------

             

            package {
              import flash.events.Event;
              
              import mx.controls.TextArea;
              
              public class DynamicWidthTextArea extends TextArea{
                public function DynamicWidthTextArea(){
                  super();
                  super.horizontalScrollPolicy = "off";
                  super.verticalScrollPolicy = "off";
                  super.wordWrap = false;
                  this.addEventListener(Event.CHANGE, adjustWidthHandler);
                }
                
                private function adjustWidthHandler(event:Event):void{
                  if(width <= textField.textWidth + textField.getLineMetrics(0).width){
                    width = textField.textWidth;      
                    validateNow();
                  }
                }
                
                override public function set text(val:String):void{
                  textField.text = val;
                  validateNow();
                  width = textField.textWidth;
                  validateNow();
                }
                
                override public function set htmlText(val:String):void{
                  textField.htmlText = val;
                  validateNow();
                  width = textField.textWidth;
                  validateNow();
                }
                override public function set width(value:Number):void{
                  if(textField == null){
                    if(width <= value){
                      super.width = value;
                    }
                  }else{        
                    trace("width: " + width);
                    trace("super.maxWidth: " + super.maxWidth);
                    if (textField.getLineMetrics(0).width<= super.maxWidth){
                      trace("textField.textWidth: " + textField.textWidth);
                      trace("textField.getLineMetrics(0).width: " + textField.getLineMetrics(0).width);
                      if(width <= textField.getLineMetrics(0).width + 10){
                        super.width = textField.getLineMetrics(0).width + 10;
                      }         
                    }else{
                        super.width = super.maxWidth;          
                    }   
                  }
                }
                
                override public function get text():String{
                    return textField.text;
                }
                
                override public function get htmlText():String{
                    return textField.htmlText;
                }
               
                override public function set maxWidth(value:Number):void{
                  super.maxWidth = value; 
                }
              }
            }
            
            

             

            --------------------- Test.mxml --------------------------

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              xmlns:comp="*">
              <mx:HBox>
                <mx:Label text="Font size 8: "/>
                <comp:DynamicWidthTextArea width="100" fontSize="8"/>    
              </mx:HBox>
              <mx:HBox>
                <mx:Label text="Font size 10: "/>
                <comp:DynamicWidthTextArea width="100" fontSize="10"/>    
              </mx:HBox>
              <mx:HBox>
                <mx:Label text="Font size 12: "/>
                <comp:DynamicWidthTextArea width="100" fontSize="12"/>    
              </mx:HBox>
              <mx:HBox>
                <mx:Label text="Font size 20: "/>
                <comp:DynamicWidthTextArea width="100" fontSize="20"/>    
              </mx:HBox>
              <mx:HBox>
                <mx:Label text="Font size 40: "/>
                <comp:DynamicWidthTextArea width="100" height="100" fontSize="40"/>    
              </mx:HBox>
              <mx:HBox>
                <mx:Label text="Font size 100: "/>
                <comp:DynamicWidthTextArea width="200" height="120" fontSize="100"/>    
              </mx:HBox>
            </mx:Application>
            
            
            • 3. Re: Increase text area width by typing text in it
              flx23 Level 1

              Thanks greg it was helpfull ..actually i am using this with the objecthandle swc ..i have added this dyanmic text area to it..now as i resize the objecthandle i have done this which not works..

               

                        DWTextArea.width=oh.width;
                          DWTextArea.height=oh.height;

               

              and when the user is typing the text i have set the width and height of objecthandle according to that..it works.

               

              oh.width=DWTextArea.width;

               

              how can i set the width of this dynamic text area ?

              • 4. Re: Increase text area width by typing text in it
                Gregory Lafrance Level 6

                Are you saying you cannot set the width directly, like   myDynamicTA.width = 300?

                 

                Greg Lafrance
                www.ChikaraDev.com

                Flex Development and Support Services

                • 5. Re: Increase text area width by typing text in it
                  flx23 Level 1

                  hi greg..

                   

                  Actually..There is a change in plan...as i said i am using the objecthandle library..let me show you the code first

                   

                  on text change event i am using this function whichdo this

                   

                  private function OnChange():void


                  //oh  objecthandle variable

                   

                  //ohtextarea textarea varialbe

                   

                    {

                  oh.addEventListener(ObjectHandleEvent.OBJECT_RESIZING_EVENT,txtWidthHandler);

                   

                       if(ohTxtArea.textHeight>44)
                              {
                                  oh.height=ohTxtArea.height=ohTxtArea.textHeight+10;
                                  if(TxtAreaMessage.text=="")
                                  {
                                      oh.height=ohTxtArea.height=44;
                                      oh.width=ohTxtArea.width=160;
                                  }
                                 
                              }

                   

                          }

                  on text change what this function do is,it increase the textarea hieght and objecthandle height depending upon textarea texthieght..now as the user types the text..the texthieght increase which further..increase the textarea hieght and objecthandle height

                   

                  now on the resize event that is ..txtWidthHandler...i am doin this

                   

                  private function txtWidthHandler(_evnt:ObjectHandleEvent):void
                          {
                            ohTxtArea.width=oh.width;                                           ///adjusting width
                              ohTxtArea.height=oh.height=ohTxtArea.textHeight;     //unable to adjust as textheight of textarea is fixed now
                          }

                  in this as i resize the objecthandle i am adjusting the width according to that.and the text moves and adjusts itself according the the width it is getting during the user resize the object handle..

                   

                   

                  Problem:-

                   

                  The problem is the textheight of text in the textarea remain fixed like when the user was typing the adjust the height of objecthandle and textarea depending upon textheight..Now as i am not typing anything ..i am resizing so the textheight remains same assume it to be 100..but as the width is changing the text adjust itself according to that..i am not able to get that text height..after resize..i hope u get my point..check attach snapshots it will clear you more of it..