Is there anyway to have a textarea "autofit" height based on the content at page load?

Question

Is there anyway through CSS or Javascript set the height of the textarea based on the content? I have a hardcoded height in my CSS but i wanted it to default so there is no vertical scroll bar on page load?

Answer 1

How about http://www.jacklmoore.com/autosize/ Drop Autosize into any web page and it should Just Work. The source is short and well commented if you are curious to how it works.

// Example: $(document).ready(function(){     $('textarea').autosize();    }); 

Source: https://github.com/jackmoore/autosize

Demo: http://www.jacklmoore.com/autosize/

Answer 2

You can use the auto resize plugin using the jQuery UI Autoresize

Here is the html,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script  src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src="http://css-tricks.com/examples/TextareaTricks/js/autoresize.jquery.min.js"></script> <textarea></textarea> 

and here is the jquery,

$('textarea').autoResize(); 

see DEMO