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 ment grows such that the content typed is occupying more space than what height of 15px can acodat, then the scroll bar appears and user cant see the first line as shown

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.

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 ment grows such that the content typed is occupying more space than what height of 15px can acodat, then the scroll bar appears and user cant see the first line as shown

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.

• javascript
• jquery
• css

• 7 Possible duplicate of http://stackoverflow./questions/2948230/auto-expand-textarea – Anthony Clark Commented Feb 26, 2013 at 5:28
• I created a plugin a while back that does what you need and a lot more: github./ajcrites/jquery.supertextarea -- it works marginally well – Explosion Pills Commented Feb 26, 2013 at 5:49
• Maybe this helps: impressivewebs./demo-files/textarea-auto-resize – earthdesigner Commented Feb 27, 2013 at 6:10

2 Answers 2

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();
});

You could use jQuery to acplish 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.