-
-
Save maxt3r/2485356e91a1969bdb6cf54902e61165 to your computer and use it in GitHub Desktop.
// An autoresize directive that works with ion-textarea in Ionic 2 | |
// Usage example: <ion-textarea autoresize [(ngModel)]="body"></ion-textarea> | |
// Based on https://www.npmjs.com/package/angular2-autosize | |
import { Directive, HostListener, ElementRef } from "@angular/core"; | |
@Directive({ | |
selector: "ion-textarea[autoresize]" // Attribute selector | |
}) | |
export class Autoresize { | |
@HostListener("input", ["$event.target"]) | |
onInput(textArea: HTMLTextAreaElement): void { | |
this.adjust(); | |
} | |
constructor(public element: ElementRef) { | |
} | |
ngOnInit(): void { | |
this.adjust(); | |
} | |
adjust(): void { | |
let ta = this.element.nativeElement.querySelector("textarea"); | |
ta.style.overflow = "hidden"; | |
ta.style.height = "auto"; | |
ta.style.height = ta.scrollHeight + "px"; | |
} | |
} |
import the file and add it to
@NgModule({
declarations: [
Autoresize
]
})
Thanks for this :) Made some changes in here:
https://gist.github.com/bruno-campos/14a0977743ebda598936a246a55fabb3
Basically I wanted it to work having a maximum height and also don't override my initial css height value
Usage:
<ion-textarea autoresize="100"></ion-textarea>
For a 100px maximum height
Thanks to all, this works beautifully.
I've updated @bruno-campos addition to allow you to optionally add a maximum height for the textarea.
https://gist.github.com/kinoli/da7aee28934ec5728fb28d1ac3548230
<ion-textarea autoresize [(ngModel)]="body"></ion-textarea>
<ion-textarea autoresize="100" [(ngModel)]="body"></ion-textarea>
Enjoy!
Amazing! Thanks! Working perfectly with Ionic 3
Hi everyone,
I'm using this tricks for months but a user report me a bug. When you put lots of new lines, the apps seems to be moving to the top : my header is going under Status bar and a blank space appears in the bottom.
Has anyone this kind of bug ? If not could you send me your Status bar config. Here is mine :
<plugin name="cordova-plugin-statusbar" spec="^2.4.1" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="StatusBarDefaultScrollToTop" value="false" />
Thanks in advance
@kinoli Thaank you sir its working fine in ionic 3
Where to put the file autoresize.ts and how to use it?