The AutoGrow Node Plugin makes textarea expands in height to fit its contents automatically. This user interface is commonly found in websites including Facebook comments.

{{>getting-started}}

Use AutoGrow Node Plugin

You just simply get a textarea Node reference and then call the plug method, passing in a reference to the AutoGrow Node Plugin.

``` YUI().use('gallery-node-autogrow', function (Y) { Y.one("textarea").plug(Y.Plugin.NodeAutoGrow); }); ```

How it works?

Unlike other similar implementations use scrollHeight attribute, this plugin uses mirror element technique.

It needs a sibling pre element as mirror and an outer div element as wrapper. This plugin will check if you provide the required HTML markup. If not, it creates the following structure automatically.

```

```

The textarea element needs to be absolutely positioned, keeping 100% width and height with the wrapper.

While AutoGrow Node Plugin is plugged or the valuechange event is triggered by user, The text in pre element will also be updated. Thus the height of wrapper can be influenced. The following stylesheet is just for illustrating how it works.

``` .yui3-autogrow { background: #fff; border: 1px solid #abadb3; position: relative; min-height: 50px; width: 150px; /* The default width. */ } .yui3-autogrow textarea { position: absolute; left: 0; top: 0; width: 100%; height: 100%; resize: none; overflow: hidden; } .yui3-autogrow textarea pre { visibility: hidden; /* Hide the text; just using it for sizing */ } ```

Benefits

Better Performance

JavaScript is only used for event binding and update the text in mirror element. It has no need to update the DOM style.

More Accurate

The scrollHeight isn't very accurate because it may be influenced by line height, font family and mixed multiple languages words. However, this approach works perfectly without guessing.

Disadvantages

More Styling

Both the textrarea and pre elements need to be reset to have exactly the same style. You might have to customize stylesheet to satisfy your needs.