Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Automatically resizes textareas based on their content.
JavaScript CSS
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Demos
Source
LICENSE
README.md
package.yml

README.md

Form AutoGrow

Automatically resizes textareas based on their content.

Screenshot

This Plugin is part of MooTools PowerTools!.

Build

Build via Packager, requires MooTools Core and MooTools Class-Extras to be registered to Packager already

packager register /path/to/form-autogrow
packager build Form-AutoGrow/* > form-autogrow.js

To build this plugin without external dependencies use

packager build Form-AutoGrow/* +use-only Form-AutoGrow > form-autogrow.js

Demo

See Demos/index.html

How To Use

Create a new instance of Form.AutoGrow for your TextArea-Element

new Form.AutoGrow('myTextarea');

Options

  • minHeightFactor (number, defaults to 2): The minimum textarea height based on the font-size
  • margin (number, defaults to 0): A margin to be added (subtracted) to the calculated textarea height

CSS Tips

Use the following CSS-Styles to get most out of Form.AutoGrow.

Hide the vertical scrollbar that sometimes appears in Webkit while resizing

textarea {
    overflow-y: hidden;
}

Hide the resize handle in Webkit

textarea {
    resize: none;
}

Animate the height via CSS-Transforms

textarea {
    -moz-transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-transition-property: height;
    -moz-transition-property: height;
    -o-transition-property: height;
    transition-property: height;
}
Something went wrong with that request. Please try again.