Skip to content
latest
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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