Skip to content

Instantly share code, notes, and snippets.

@mbenford mbenford/autosize.js
Created Dec 18, 2013

What would you like to do?
Autosize directive for AngularJS. Resizes an input field automatically so its content is always visible.
app.directive('autosize', function($document) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
var placeholder, span, resize;
placeholder = element.attr('placeholder') || '';
span = angular.element('<span></span>');
span[0].style.cssText = getComputedStyle(element[0]).cssText;
span.css('display', 'none')
.css('visibility', 'hidden')
.css('width', 'auto');
resize = function(value) {
if (value.length < placeholder.length) {
value = placeholder;
span.css('display', '');
try {
element.css('width', span.prop('offsetWidth') + 'px');
finally {
span.css('display', 'none');
ctrl.$parsers.unshift(function(value) {
return value;
ctrl.$formatters.unshift(function(value) {
return value;

This comment has been minimized.

Copy link

phonyphonecall commented Aug 26, 2014

great alternative to angular-elastic if you're using inputs instead of text areas. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.