CODEWITHSUNDEEP
javascriptjquerycss
ismail baig
ismail baig

Reputation: 891

Increase the textarea height (without the scroll bar) dynamically as the user keeps typing

My application has a textarea (html) field with the following css

.textareaCss{overflow: auto;width:500px; height:15px; margin:0; padding:5px; margin-top:4px; margin-bottom:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; border:#d9d9d9 solid 1px;color: #999;}

Now the effect is, if the user's comment grows such that the content typed is occupying more space than what height of 15px can accomodat, then the scroll bar appears and user cant see the first line as shown

enter image description here

Is it possible that the height of the textarea grows such that the whole content is always seen. PleaseNote: Anyhow the limit of characters is 1000.

Upvotes: 2

Views: 16255

Answers (2)

ismail baig
ismail baig

Reputation: 891

The answer is as follows 1. Download the pluging "autogrow.js" Autogrow js from GitHub

And then add it to your code and give the reference respectively.

Then add the code as below

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

Upvotes: 4

Mike
Mike

Reputation: 1738

You could use jQuery to accomplish this. I think the change event will work for you. All you have to do is reset the height on change.

For example:

$('.textareaCss').on('keyup', function(){
    $(this).css('height', '100%');
});

I haven't tested this, but it should point you in the right direction.

Upvotes: 2

Related Questions