A directive for AngularJS which automatically resizes the width of input field according to the content, while typing.
Clone or download
Permalink
Failed to load latest commit information.
config Add test task Sep 8, 2015
demo Calculate max-width correctly basing on first block element. Fixes #16 Jul 7, 2016
dist Calculate max-width correctly basing on first block element. Fixes #16 Jul 7, 2016
src Calculate max-width correctly basing on first block element. Fixes #16 Jul 7, 2016
tasks Add test task Sep 8, 2015
test Calculate max-width correctly basing on first block element. Fixes #16 Jul 7, 2016
.gitignore Add karma test Aug 23, 2015
.jshintrc Add karma test Aug 23, 2015
.travis.yml set up Travis CI - install bower components Oct 15, 2015
Gruntfile.js
LICENSE Initial commit Sep 17, 2014
README.md set up Travis CI - add travis badge Oct 15, 2015
bower.json Calculate max-width correctly basing on first block element. Fixes #16 Jul 7, 2016
karma.conf.js fix Travis CI build Jun 3, 2016
package.json Calculate max-width correctly basing on first block element. Fixes #16 Jul 7, 2016

README.md

Angular Elastic Input Build Status

A directive for AngularJS which automatically resizes the width of input field according to the content, while typing.

Installation

Download archive file above or install using bower:

bower install angular-elastic-input --save

Include the script tag on your page after the AngularJS script tags:

<script src="path/to/angular-elastic-input.min.js"></script>

Ensure that your application module specifies puElasticInput as a dependency:

angular.module('myApp', ['puElasticInput']);

Use the directive by specifying an pu-elastic-input attribute on an input element:

<input type="text" pu-elastic-input/>

Demo

Do you want to see Angular Elastic Input in action?

Visit http://jacek-pulit.github.io/angular-elastic-input/

Options

Minimum and maximum width you can specify as css properties: min-width and max-width

<input type="text" pu-elastic-input style="min-width: 200px; max-width: 400px;"/>

or as element attributes: pu-elastic-input-minwidth and pu-elastic-input-maxwidth

<input type="text" pu-elastic-input pu-elastic-input-minwidth="300px" pu-elastic-input-maxwidth="none"/>

Defaults

min-width: 0

max-width: inner width of parent element

License

Angular Elastic Input is licensed under the MIT license. See the LICENSE file for more details.