Skip to content

mariuszzak/ember-autoresize

 
 

Repository files navigation

Ember AutoResize Ember Observer Score Code Climate

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.)

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

Options

max-width

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

max-height

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

rows

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

{{textarea autoresize=true rows=2}}

max-rows

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

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

Installation

ember install ember-autoresize

Roadmap

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

Contributing

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.

Publishing Documentation

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

npm run-script publish-docs

About

Autoresize for Ember Components

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 64.2%
  • CSS 23.5%
  • HTML 12.3%