# Strange behaviour of ion-textarea with auto-grow

**URL:** <https://forum.ionicframework.com/t/strange-behaviour-of-ion-textarea-with-auto-grow/175353>\
**Category:** Ionic Framework\
**Created:** [October 11, 2019, 7:09pm UTC](https://forum.ionicframework.com/t/strange-behaviour-of-ion-textarea-with-auto-grow/175353 "2019-10-11T19:09:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![MichBerg](https://avatars.discourse-cdn.com/v4/letter/m/57b2e6/32.png) [@MichBerg](https://forum.ionicframework.com/u/MichBerg)\
**Post date:** [October 11, 2019, 7:09pm UTC](https://forum.ionicframework.com/t/strange-behaviour-of-ion-textarea-with-auto-grow/175353/1 "2019-10-11T19:09:32Z")

</div>

Hi there,

I use `<ion-textarea>` with auto-grow function in a modal component in Ionic v4.  
On my page I need to set up height of content in relation to body.clientHeight dynamically when loading. If I first open the modal, everything works fine. But the second time, style=“height:0” of the `<textarea>` within the `<ion-textarea>`.

---

<div class="post-metadata">

**Author:** ![IonicGeoff](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ionicgeoff/32/128657_2.png) [@IonicGeoff](https://forum.ionicframework.com/u/IonicGeoff)\
**Post date:** [October 13, 2019, 8:28am UTC](https://forum.ionicframework.com/t/strange-behaviour-of-ion-textarea-with-auto-grow/175353/2 "2019-10-13T08:28:20Z")

</div>

You’re probably going to need to show us some code so we can see what you mean? (e.g. what “second time” ??)

---

<div class="post-metadata">

**Author:** ![MichBerg](https://avatars.discourse-cdn.com/v4/letter/m/57b2e6/32.png) [@MichBerg](https://forum.ionicframework.com/u/MichBerg)\
**Post date:** [October 14, 2019, 6:00pm UTC](https://forum.ionicframework.com/t/strange-behaviour-of-ion-textarea-with-auto-grow/175353/3 "2019-10-14T18:00:41Z")

</div>

Thanks you for reply.

**component.html** :

```auto
<ion-footer>    
  <ion-toolbar id="footerToolbar" style=" position:fixed;bottom:0;z-index:20;--background:#f4f5f8">
        <ion-textarea auto-grow="true" id="textbar" lines="none" type="text" rows="1" [(ngModel)]="msg" placeholder="Message"></ion-textarea>
  </ion-toolbar>
</ion-footer

```

**component.ts** :

```auto
export class ChatComponent implements OnInit {

bodyHeight = document.body.clientHeight;
distanceTop: number;
minimumHeight: number;
footer: any;
footerToolbar: any;

constructor(){

  ngOnInit(){
      this.setFooterAndDrawer();
  }
  setFooterAndDrawer(){
      this.footerToolbar = document.getElementById('footerToolbar');
      this.footer = document.querySelector('ion-footer');
      this.checkToolbarHeight();
  }

  checkToolbarHeight(){
        if (this.footerToolbar.clientHeight !== 0) {
          this.divTopHeight = this.bodyHeight - (2 * this.footerToolbar.clientHeight)
          this.divDockedHeight = this.bodyHeight / 2.5 - this.footerToolbar.clientHeight - 30;
          this.ionDrawerSelector.style.height = this.divDockedHeight + 'px';

          this.minimumHeight = this.footerToolbar.clientHeight + 30 //height of drawer bar;
          this.distanceTop = this.footerToolbar.clientHeight;

      }
      else { setTimeout(()=>{this.checkToolbarHeight()},100);

    }
  }

```

“The second time” is, if I reopen the modal, the behaviour of the ion-textarea changes. The second time, the textarea inside seems to be a bit lower placed. But every time the developer tool tells me textarea inside of ion textarea has a set hight of 0px. When I force the size of the textarea with a function like this:

```auto
@ViewChild(IonTextarea, {static:false}) ionTextarea: IonTextarea;
(...)
checkTextarea(){
     this.textArea = this.ionTextarea.getInputElement();
      if(this.textArea[' __zone_symbol__ value'].style !== undefined ){
        this.textArea[' __zone_symbol__ value'].style.height = "39px";
        setTimeout(()=> {if(this.textArea[' __zone_symbol__ value'].style.height==0){
          this.checkTextarea()
        }},1000);
        
      } else {
        setTimeout(()=>this.checkTextarea(),100)
      }
}

```

it kind of works. Also when I click on the ion-textarea field, textarea gets focused and everything works fine.

---

<div class="post-metadata">

**Author:** ![IonicGeoff](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ionicgeoff/32/128657_2.png) [@IonicGeoff](https://forum.ionicframework.com/u/IonicGeoff)\
**Post date:** [October 14, 2019, 10:21pm UTC](https://forum.ionicframework.com/t/strange-behaviour-of-ion-textarea-with-auto-grow/175353/4 "2019-10-14T22:21:46Z")

</div>

Yeah, I think you might be stuck with a lot of experimentation needed there? These couple of generic questions might (?) give you a clue to help…The second one has an “Angular” solution, but no idea if it is still relevant, or what is going to happen the second time 🙂

> <https://stackoverflow.com/questions/19684040/how-do-i-get-the-height-of-a-textarea/52311524#52311524>

> <https://stackoverflow.com/questions/17772260/textarea-auto-height>

---

<div class="post-metadata">

**Author:** ![MichBerg](https://avatars.discourse-cdn.com/v4/letter/m/57b2e6/32.png) [@MichBerg](https://forum.ionicframework.com/u/MichBerg)\
**Post date:** [October 16, 2019, 12:14pm UTC](https://forum.ionicframework.com/t/strange-behaviour-of-ion-textarea-with-auto-grow/175353/5 "2019-10-16T12:14:27Z")

</div>

Thank you. So with the little workarround it works fine, still don’t know whats happening.

```auto
checkTextarea(){
      return this.ionTextarea.getInputElement().then((element) => {
        if(element.style.height == '0px'){
         return element.style.height = 'auto';
        } else {
          setTimeout(()=> this.checkTextarea(),100)};
        })
    }

```