Form-AutoGrow 1.0.5

Automatically resizes textareas based on their content.

This Plugin is part of MooTools PowerTools!.



Details

Author
Christoph Pojer
Current version
1.0.5
GitHub
cpojer/mootools-form-autogrow
Downloads
1311
Category
Forms
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Core/Class.Extras
    • Core/Element
    • Core/Element.Event
    • Core/Element.Style
    • Core/Element.Dimensions
    • Class-Extras/Class.Binds
    • Class-Extras/Class.Singleton

How to use

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

new Form.AutoGrow('myTextarea');

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


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;
}

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus