Fork me on GitHub


A jQuery plugin that dynamically updates textarea's height to fit the content.

Important notes: This plugin works for textareas with fixed width as well as for textareas with fluid width. The CSS resize property is set to "none" by this plugin, which means you will not be able to manually resize the textarea.



Get the zip containing the flexibleArea plugin here.

How To Use

Step 1: together with JQuery, include jquery.flexibleArea.js in your page:

<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.flexibleArea.js"></script>

Step 2: call the function on your textarea, as follows:

$(function() {

Step 3: OPTIONAL - whenever you update the textarea content via Javascript, you need to trigger the custom "updateHeight" event to update the textarea:



There are only 2 options available and these are set via CSS:

- the default height which you can specify using height or min-height; for best results, i suggest you always specify a default height

- the maximum height which you can specify using max-height; when the maximum height is reached, scroll bars will appear

Support & Feedback

For issues or suggestions please see flexibleArea.js on Github, or tweet @flaviusmatis.

Thanks for your support!