Note: if you're using a version of Ember less than 1.12.0, then please use 0.4.1 of this addon.

Ember AutoResize is an Ember-CLI addon for providing autoresize functionality to Ember. This package currently provides the necessary bootstrapping for {{input}} and {{textarea}} components.

To play with the addon, look at our demo. (Note: The demo is a bit out of date, check the documentation below for proper usage.)

To enable autoresizing on an input, add the following to your handlebars:

{{input autoresize=true}}

Refresh your page, and you should see that when you type in your text field, it automatically resizes to fit the text.

Textareas work exactly the same way:

{{textarea autoresize=true}}

Set the maximum width of the resizeable element. If no unit is provided, it assumes that it's in pixels.

{{input autoresize=true max-width=200}}

Set the maximum width of the element. If no unit is provided, it assumes that it's in pixels.

{{input autoresize=true max-height=300}}

Set the minimum number of rows for the element. Recommended for textareas.

{{textarea autoresize=true rows=2}}

Set the maximum number of rows for the element. Recommended for textareas.

{{textarea autoresize=true max-rows=10}}

ember install ember-autoresize

• Optimize style lookups
• Font fitting
• Clearer ways to enable autoresizing on templates

Contributors are welcome! Please provide a reproducible test case. Details will be worked out on a case-per-case basis. Maintainers will get in touch when they can, so delays are possible. For contribution guidelines, see the code of conduct.

To publish documentation (under the tests/dummy directory) run the following command:

npm run-script publish-docs