-
-
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"; | |
} | |
} |
Following the previous commentators, I just did this:
https://gist.github.com/Eetezadi/368658ca4364354cfca768f24e2ac810
I think there should be a little timeout before
ta.style.height = ta.scrollHeight + "px";
to give it a little time to recalculate the scrollHeight.
For me, the ScrollHeight was not correct at initial run.
I did this:
setTimeout(() => {
ta.style.height = ta.scrollHeight + "px";
}, 100);
how to use autoresize.ts file under my ionic project?
Thanks for this. For something small like this I would rather have an in-house impl than another module I have to import.
Where to put the file autoresize.ts and how to use it?
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
I have used if (ta) { ... } in typescript@2.0.9, @angular/core@2.2.1
It didn't work in the initial state without this for me