2

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.

ismail baig
  • 861
  • 2
  • 11
  • 39
  • 7
    Possible duplicate of [http://stackoverflow.com/questions/2948230/auto-expand-textarea](http://stackoverflow.com/questions/2948230/auto-expand-textarea) – Anthony Clark Feb 26 '13 at 05:28
  • I created a plugin a while back that does what you need and a lot more: https://github.com/ajcrites/jquery.supertextarea -- it works marginally well – Explosion Pills Feb 26 '13 at 05:49
  • Maybe this helps: http://www.impressivewebs.com/demo-files/textarea-auto-resize/ – earthdesigner Feb 27 '13 at 06:10

2 Answers2

4

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();
});
ismail baig
  • 861
  • 2
  • 11
  • 39
  • @GabrielRyanNahmias - ya, but i can only after 23 hours itseems. so i will do it later....Anyhow thanks for your guidance... :) – ismail baig Feb 27 '13 at 06:13
2

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.

Mike
  • 1,718
  • 3
  • 30
  • 58
  • 1
    Probably "onkeyup", not "onchange", if anything – Ian Feb 26 '13 at 05:46
  • I would agree, I wasn't sure if onchange fired after each keystroke or only after focus left. Key up is the better option here. Response editted. – Mike Feb 26 '13 at 05:49
  • @Mike Thanks for the quick reply, (not sure if i am missing something in your answer) But this way the textarea gets expanded as soon as you click on it instead of as on the user reaches a new line. Anyhow i got the answer via a plugin called "autogrow.js" [https://github.com/jerryluk/jquery.autogrow] Code is as follows, 1. Give teh reference to the plugin and add the code as follow , **$(function() { $('#txtMeetingAgenda').autogrow(); });** – ismail baig Feb 27 '13 at 05:59
  • 1
    Just adding a valid link to the aforementioned repo (the last one includes the ending bracket): https://github.com/jerryluk/jquery.autogrow – Gabriel Ryan Nahmias Feb 27 '13 at 06:09