# Auto growing textarea in ionic

**URL:** <https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213>\
**Category:** uncategorized\
**Created:** [June 29, 2014, 3:49pm UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213 "2014-06-29T15:49:42Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Khashayar](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@Khashayar](https://forum.ionicframework.com/u/Khashayar)\
**Post date:** [June 29, 2014, 3:49pm UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/1 "2014-06-29T15:49:44Z")

</div>

Hi,

I’m trying to add an autogrowing textarea to my app but for some reason it is not working. It is the module that I’m using [https://github.com/tagged/autogrow](https://github.com/tagged/autogrow) (it was recommended on the ionic forum)

---

<div class="post-metadata">

**Author:** ![ysngms](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ysngms/32/116464_2.png) [@ysngms](https://forum.ionicframework.com/u/ysngms)\
**Post date:** [June 29, 2014, 11:59pm UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/2 "2014-06-29T23:59:35Z")

</div>

you can try this one

> **[monospaced/angular-elastic](https://github.com/monospaced/angular-elastic)**
>
> angular-elastic - Elastic (autosize) textareas for AngularJS, without jQuery dependency.

---

<div class="post-metadata">

**Author:** ![Khashayar](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@Khashayar](https://forum.ionicframework.com/u/Khashayar)\
**Post date:** [June 30, 2014, 12:14am UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/3 "2014-06-30T00:14:07Z")

</div>

This one didn’t work too. I think none of this work inside the ion-scroll tag.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [June 30, 2014, 2:00am UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/4 "2014-06-30T02:00:56Z")

</div>

Hey @Khashayar, can you post a demo of this?

---

<div class="post-metadata">

**Author:** ![Khashayar](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@Khashayar](https://forum.ionicframework.com/u/Khashayar)\
**Post date:** [June 30, 2014, 2:21am UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/5 "2014-06-30T02:21:48Z")

</div>

I found a much more better alternative.

```
$scope.updateTextArea = function() {
    var element = document.getElementById("TextArea");
    element.style.height = element.scrollHeight + "px";
}

```

It doesn’t need any additional directives or jQuery. You can call the updateEditor() on ng-change.

---

<div class="post-metadata">

**Author:** ![akhil](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/akhil/32/8036_2.png) [@akhil](https://forum.ionicframework.com/u/akhil)\
**Post date:** [July 24, 2014, 3:08am UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/6 "2014-07-24T03:08:18Z")

</div>

@Khashayar Thanks, your trick really worked. Below is the code for same.

```
<textarea 
	placeholder="Enter Notes"
	id="txtnotes"
	ng-keyup="expandText()"
	ng-keydown="expandText()">
</textarea> 

$scope.expandText = function(){
	var element = document.getElementById("txtnotes");
	element.style.height = element.scrollHeight + "px";
}
```

---

<div class="post-metadata">

**Author:** ![rdtran](https://avatars.discourse-cdn.com/v4/letter/r/7ab992/32.png) [@rdtran](https://forum.ionicframework.com/u/rdtran)\
**Post date:** [December 16, 2014, 1:20am UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/7 "2014-12-16T01:20:23Z")

</div>

What about multiple textareas in one controller? I noticed that I have to add another scope for each textareas.

$scope.expandText = function(){  
var element = document.getElementById(“txtnotes”);  
element.style.height = element.scrollHeight + “px”;  
}  
$scope.expandText1 = function(){  
var element = document.getElementById(“txtnotes1”);  
element.style.height = element.scrollHeight + “px”;  
}

---

<div class="post-metadata">

**Author:** ![Khashayar](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@Khashayar](https://forum.ionicframework.com/u/Khashayar)\
**Post date:** [December 17, 2014, 5:46pm UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/8 "2014-12-17T17:46:30Z")

</div>

or you can pass in the id as an attribute to the function.

---

<div class="post-metadata">

**Author:** ![kurtommy](https://avatars.discourse-cdn.com/v4/letter/k/f4b2a3/32.png) [@kurtommy](https://forum.ionicframework.com/u/kurtommy)\
**Post date:** [February 12, 2015, 3:35pm UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/9 "2015-02-12T15:35:20Z")

</div>

Man you save my evening!!!  
I suggest this just in case you have to edit that field and you want to start from the right textarea height

```
$scope.$on('$ionicView.afterEnter',function(){
      $scope.expandText();
    });

```

And thid directive for close the keyboard on enter key press!  
(the ionic version doesn’t work -\> return-close=“true”)

```
.directive('ngEnter', function($cordovaKeyboard,$timeout) {
        return function(scope, element, attrs) {
            element.bind("keydown keypress", function(event) {
                if(event.which === 13) {
                    event.preventDefault();
                    $cordovaKeyboard.close();
                }
            });
        };
    })
```

---

<div class="post-metadata">

**Author:** ![agb2a](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@agb2a](https://forum.ionicframework.com/u/agb2a)\
**Post date:** [April 19, 2017, 2:09pm UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/10 "2017-04-19T14:09:15Z")

</div>

Any ideas on how to apply that on Ionic Creator?

Cheers!

---

<div class="post-metadata">

**Author:** ![ranahaseeb](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@ranahaseeb](https://forum.ionicframework.com/u/ranahaseeb)\
**Post date:** [September 19, 2019, 6:19am UTC](https://forum.ionicframework.com/t/auto-growing-textarea-in-ionic/6213/11 "2019-09-19T06:19:57Z")

</div>

I am using this one.

> **[ngx-autosize](https://www.npmjs.com/package/ngx-autosize)**
>
> Directive that automatically adjusts textarea height to fit content