Limit height of TextArea based on content

Question

I'm using Bootstrap, to disable the contents of a TextArea as such:

<td>
  <textarea class="form-control disabled" id="message"></textarea>
</td>

which works fine, apart from the fact that I need to control the height as well, based on the content being rendered into the control.

Are there any HTML 5 tricks, or CSS tricks I can use to dynamically resize the height of the control based upon the text? Or can this only be achieved using JScript

Have a look at this: http://stackoverflow.com/questions/11698956/textarea-set-height-based-on-content-js-or-jquery — Chris Spittles, Aug 27 '14 at 10:29
David, this is showing textArea resizing on input, however the textarea is being populated on page load, using Ajax, so no user input. — CSharpNewBee, Aug 27 '14 at 10:48
@ChrisSpittles, i used the flexibleArea from your link. Cheers — CSharpNewBee, Aug 27 '14 at 11:43

score 1 · Accepted Answer · answered Aug 27 '14 at 10:32

Try this:

DEMO

HTML:

<textarea id="ta" class="form-control disabled" id="message"></textarea>

CSS:

textarea {

    resize:none;
}

SCRIPT:

$("#ta").keyup(function (e) {
    autoheight(this);
});

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));

score 0 · Answer 2 · answered Aug 27 '14 at 10:36

0

Add following css:

textarea.form-control{
   position:absolute;
   height: auto;
}

answered Aug 27 '14 at 10:36

Viswanath Donthi

1,791
1
11
12

please try to improve your answer by providing details of what have you done and why you've done it. regards – Bogdan Emil Mariesan Aug 27 '14 at 10:56

Limit height of TextArea based on content

2 Answers2

DEMO

Linked