[SOLVED] Ion-textarea resize height dynamically

Ionic Framework ionic-v3
2

Freak, took me way to much tiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiime just for that, but got it.

The tricks is: don’t use ion-textarea but textarea and don’t forget the ‘.px’ part to change the height dynamically.

Html:

<textarea #myInput id="myInput" rows="1" maxLength="500" (keyup)="resize()" [(ngModel)]="myStuff"></textarea>

Css:

#myInput {
    width: calc(100% - 10px);
    border: 0;
    border-radius: 0;
    background: transparent;
}

Ts:

@ViewChild('myInput') myInput: ElementRef;

resize() {
    this.myInput.nativeElement.style.height = this.myInput.nativeElement.scrollHeight + 'px';
}
15 Likes