Skip to content

Instantly share code, notes, and snippets.



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