View on GitHub

Angular Elastic Input

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

Download this project as a .zip file Download this project as a tar.gz file

Installation:

1. Download archive file above or install using bower:

bower install angular-elastic-input --save

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

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

3. Ensure that your application module specifies puElasticInput as a dependency:

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

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

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

Demo:

Supports:

Model updates: click here

Placeholders:

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;"/>

Example:

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"/>

Example:

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.