Check out my GitHub page for other plugins.

• Project page
• Issues

flexibleArea.js

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.

Example

This textarea has a default height of 72px set. The max-height is set to 200px. Type a few more lines to see the auto resize in action.

Download

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() {
    $(selector).flexible();
});

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

$(selector).trigger('updateHeight');

Options

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!