Cheers, I have this text area
And I found this method that when you type in the textarea it autosizes
protected adjustTextarea(event: any): void {
let textarea: any = event.target;
textarea.style.overflow = "hidden";
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
return;
}
and applying lt like this in the html
(input)="adjustTextarea($event);"
thing is, this is only triggered when we have typed once
but lets say that textarea had a lot of text and we just loaded the page, it wouldn’t have extended, only when we wrote something on it
So I was looking around for something like (load)="adjustTextarea($event);"
something on load yknow, but haven’t come across anything
Anyone has any idea how I could implement this event to trigger right away on the component?
Maybe on an onchange event? Something like (change) = "adjustTextarea($event)" ?
Yeah I had tried change and onchange too, didn’t work
is there a list for these? like (input) (change), couldnt find one
I was also thinking of ways I could do this, I could try to get the component in the ts through the Element directory or something like that and then in init I’d perform the code to autosize to the element, not sure how to apply this to the code itself
protected adjustTextarea(event: any): void {
let textarea: any = event.target;
textarea.style.overflow = "hidden";
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
return;
}
instead of event.target it would be the result of the get of the element?
So basically you want to auto resize after view gets loaded by calling method adjustTextarea(..)? Am I right?
Sorry I wasn’t paying attention with (change) as it’s triggered only after text area value changes from it’s initial state.
You could try to call adjustTextarea(..) after the view gets rendered inside ionViewDidLoad() .
just tried
ionViewDidLoad(){
const input = document.getElementById('inputArea').getElementsByTagName('ion-textarea')[0];
this.adjustTextarea(input);
}
protected adjustTextarea(input: any): void {
let textarea: any = input;
textarea.style.overflow = "hidden";
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
return;
}
and didn’t work, also nothing was printed on the console so no errors everything executed well it just didn’t apply the right things in the right place I guess, any idea of where I’m missing out?
ps: also tried textarea instead of ion-textarea
in the event I did
console.log(event.target);
and logged out the target to see exactly what it is, welp turns out its exactly what I expected, a direct normal reference to the element
So all I need in the code is a reference to that element to send into the function, do you have any ideas how I could achieve this?
Did this.area had value beforehand?
nop, since then ive tried ElementRef and it also doesn’t return the element like that
I’m really stuck here, easy problem not having an easy solution, wanting to execute a simple function for an element when a page opens up, jesus if this was desktop it’d be done in seconds, im such a noob in web 
Ok, sorry if I am asking too much, could you share a stackblitz demo?
oh jesus I’ve been on this for 10 minutes since you posted, I can’t get the stackblitz to get going it’s loading forever for me
all the code is
TS event
//a variable like
area: string;
//and the event
protected eventAdjustTextarea(event: any): void {
let textarea: any = event.target;
textarea.style.overflow = "hidden";
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
return;
}
and being used in HTML
<ion-textarea [(ngModel)]="this.area" (input)="eventAdjustTextarea($event);"></ion-textarea>
1 Like
Ok, I will get back to you within sometime.
try this one, it works perfect in my project
HTML
<ion-item>
<div class="autoexpandtext">
<textarea style="border: 0;width: 100%" (keyup)="resize()" placeholder="Booking Description"
name="Description" rows="1" maxLength="500" [(ngModel)]="Description" required></textarea>
</div>
</ion-item>
TS
ionViewDidLoad() {
setTimeout(() => {
this.resize();
}, 100);
}
resize() {
$('.autoexpandtext').on('change keyup keydown paste cut', 'textarea', function () {
$(this).height(0).height(this.scrollHeight);
}).find('textarea').change();
}
I tried hard yesterday, but this is tricky. We need to simulate a keypress to make it work. Nonetheless, I will keep you posted if I succeed.
Hey I copied your code and just changed the variable from ngmodel and didn’t work, are you sure nothing is missing?
there has to be other ways to achieve this without having all this trouble
this package does all the autosizing of my ion-textareas for me https://github.com/chrum/ngx-autosize just follow the guide and get it working, if it doesn’t work importing it into the app.module.ts then try importing it into the page’s module, I personally needed that dunno if you will, but package is a life saver
2 Likes
You dont need to include a external library, checkout my solution here:
Hope it helps!
Cheers
Unkn0wn0x
I’m sorry but doesn’t your solution have the same problem I presented in this very same post? That it would only autosize on input and not on load programatically.
