More than one HTML textareas resizing together

Question

I have three textareas. If any of them is being resized, i want the others to resize as like resized one.

1.Note that i am resizing just vertically.
2.This is an inline form.

<div class="col-sm-12 form-group form-inline">
   {{ Form::textarea('textarea1') }}
   {{ Form::textarea('textarea2') }}
   {{ Form::textarea('textarea3') }}
</div>

Thanks in advance.

Sure but i did not put that on jsfiddle because they are working like seperate vertically-alignable textareas. I think i lack of information for using more css or javascript. — saimcan, Dec 09 '14 at 11:01

score 1 · Answer 1 · edited May 23 '17 at 12:05

It seems that there is no event for resizing a textarea.

You could check out the following answer on an older question: https://stackoverflow.com/a/7055239/1537154

You can modify this to update al other textareas: http://jsfiddle.net/tsx1yxj3/

jQuery(document).ready(function(){
   var $textareas = jQuery('textarea');

   // store init (default) state   
   $textareas.data('x', $textareas.outerWidth());
   $textareas.data('y', $textareas.outerHeight()); 

   $textareas.mouseup(function(){

  var $this = jQuery(this);

  if (  $this.outerWidth()  != $this.data('x') 
     || $this.outerHeight() != $this.data('y') )
  {
      // Resize Action Here  
      $('textarea').height($this.outerHeight());
      $('textarea').width($this.outerWidth());
  }

  // store new height/width
  $this.data('x', $this.outerWidth());
  $this.data('y', $this.outerHeight()); 
 });

});

Resizing only kicks in after your done and there are some other limitations.

You could also look at a jquery UI implementation: http://jqueryui.com/resizable/

I also checked that post but i wasn't sure to try. I'm testing and letting you know for the results. Thank you for now. — saimcan, Dec 09 '14 at 11:29

More than one HTML textareas resizing together

1 Answers1