Autoresize for Ember Components
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
config
tests
.bowerrc
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.jshintrc
.npmignore
.travis.yml
.watchmanconfig
CHANGELOG.md
CODE_OF_CONDUCT.md
LICENSE.md
README.md
ember-cli-build.js
index.js
package-lock.json
package.json
testem.js

README.md

Ember AutoResize Ember Observer Score Code Climate

Greenkeeper badge

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

If you are making custom inputs using raw DOM elements, you can still use autoresize by specifying a custom autoresizeElement when you mixin the autoresize to your component.

import Ember from 'ember';

export default Ember.Component.extend({
  autoresizeElementDidChange: on('didInsertElement', function () {
    set(this, 'autoresizeElement', this.$('input')[0]);
  })
});

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