Dynamically expand the height of a textarea when typing more then the max width

Question

How do I grow the textarea horizontally when typing more then the max width of a text area element? Also I don't want to see the horizontal scrollbar.

rendered html

<textarea name="CatchPhrase" class="input-validation-error" id="CatchPhrase" aria-invalid="true" aria-required="true" aria-describedby="CatchPhrase-error" rows="2" cols="20" data-val-required="The Catch Phrase field is required." data-val="true" data-val-maxlength-max="50"
data-val-maxlength="The field Catch Phrase must be a string or array type with a maximum length of '50'." htmlattributes="{ id = profileCatchPhrase, class = form-control }">I like yoga sd;lasdlk asdks';aksd'asd 'asd';las ';asd'lasd';las'dl as'dla'sdl'asld as'd;las'dl; a;sdlka;sdklasd ;alsd;lkasda ;alskd;lkasd ;lkasd;lk</textarea>

Before rendering HTML

<div class="form-group">
  @Html.LabelFor(model => model.CatchPhrase, htmlAttributes: new { @class = "control-label col-lg-2 col-md-2 col-sm-2 col-xs-2" })
  <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
    @Html.TextAreaFor(model => model.CatchPhrase, new { htmlAttributes = new { id = "profileCatchPhrase", @class = "form-control" } }) @Html.ValidationMessageFor(model => model.CatchPhrase, "", new { @class = "text-danger" })
  </div>
</div>

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Try something like this:

$('#CatchPhrase').on('input', function() {
  $(this).outerHeight(38).outerHeight(this.scrollHeight);
});

see: https://stackoverflow.com/a/34513436/4613398

jsfiddle:https://jsfiddle.net/3qmztmjj/

edited May 23 '17 at 11:59

Community

1
1

answered Feb 08 '16 at 05:17

madalinivascu

32,064
4
39
55

score 1 · Answer 2 · answered Feb 08 '16 at 05:58

If I understood your question correctly & you want to increase the horizontal width of the text area you can check the text characters with maxlength & use steps to increase the width. Hope this snippet is help full for you.

$("#profileCatchPhrase").keypress(function() {
    if ($(this).val().length > $(this).attr("data-val-maxlength-max")) {
      var width = parseInt($(this).css("width").split("p")[0]) + 10;
      $(this).css("width", width + "px");
      $(this).attr("data-val-maxlength-max", parseInt($(this).attr("data-val-maxlength-max")) + 5);
    }
  });

In this i have used 10px as the icreament steps, you can adjust it accordingly.

score 1 · Answer 3 · answered Feb 08 '16 at 08:22

well, i assume u want to expand textarea horizontally not vertically then u Could try something like this:

<textarea type="text" value="" placeholder="Autosize"></textarea>

and write a simple javascript function which would expand horizontally:

$('textarea').keyup(function () {
 // I'm assuming that 1 letter will expand the input by 10 pixels
 var oneLetterWidth = 10;

 // I'm also assuming that input will resize when at least eleven characters
 // are typed
 var minCharacters = 11;
 var len = $(this).val().length;
 if (len > minCharacters) {
     // increase width
     $(this).width(len * oneLetterWidth);
 } else {
     // restore minimal width;
     $(this).width(150);
 }
});

This will works perfectly.you can also set the textarea max-width as it should stop expanding after some time so just include this css in head section of your html:

 textarea { 
 max-width: 400px;
 }

score -1 · Answer 4 · answered Feb 08 '16 at 05:13

-1

use jquery and id of textarea like below

$(function() {
   $('#CatchPhrase').autogrow();
});

answered Feb 08 '16 at 05:13

PHPExpert

945
5
9

Yes, here is the [link](https://plugins.jquery.com/autogrow/) for getting autogrow plugin. – PHPExpert Feb 08 '16 at 05:16
this demo link doesn't autogrow the height. I want something like http://flaviusmatis.github.io/flexibleArea.js/ but without the scrollbar – chuckd Feb 08 '16 at 05:26

Dynamically expand the height of a textarea when typing more then the max width

4 Answers4