[SOLVED] Ion-textarea resize height dynamically


It would not fit the requirements respectively listening only to the enter key would not produce a proper behavior. New lines are also triggered when length of the text reach the width of the textarea. As these lines, I didn’t typed any enter key and the text is displayed on multiples lines, therefore if it was a textarea, this area should had been resized

1 Like

thanks for point me out. you are right

1 Like

coolio. anyway your piece of code is cool, will help someone in the future for sure :wink:

1 Like

I’ve found another solution how to handle the resizeing of a textarea, maybe it can help someone. I’ve wrote this, because I need it just once and and not multiple times across the app. If You need the resizeing across Your app, You could store the adjustTextarea(event) a helper class / provider or something like that.

<ion-textarea type="text" (input)="adjustTextarea($event);"></ion-textarea>
 * function to adjust the height of the message textarea
 * @param {any} event - the event, which is provided by the textarea input
 * @return {void} 
protected adjustTextarea(event: any): void {
	let textarea: any		= event.target;
	textarea.style.overflow = 'hidden';
	textarea.style.height 	= 'auto';
	textarea.style.height 	= textarea.scrollHeight + 'px';



Cool but your solution do nothing if attribut “readonly” is set to "true"
work only if text area value change, not if the value is setting programmaticaly

So my solution:

constructor(public element:ElementRef) {}

protected autoSizeDescription(): void {
		let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
		textArea.style.overflow = 'hidden';
		textArea.style.height 	= 'auto';
		textArea.style.height 	= textArea.scrollHeight + 'px';

My keyboard hides input content and footer goes up even i made footer as fixed…can u suggest me some solution…I am using ionic 3

Not like this, not enough information.

Open a new post on the forum and describe your issue respectively show details/code

This very good but has a problem, if you remove some of the lines it is not resizing to smaller.

attribute seems not working when i copy a text from another apps and paste it to the textarea. I solved by replace it with ionChange

Thanks man! It worked :slight_smile:

Thank you for shared this solution

This works wonderfully with my ionic v2 project :slight_smile:

I think you’re better of using the “rows” attribute of the textarea element in combination with counting the amount of lines in your textarea. See my example:

adjustTextarea(event: any): void {
     let textarea: any = event.target;
     textarea.rows = textarea.value.split('\n').length;

Should be the most reliable way of automatically adjusting your textarea.

1 Like

Accurate solution :ok_hand:
thanks buddy

Can you be a bit more specific on how you fixed this problem with copy/paste of text?

Consistently seeing this issue on iPhone X. You can paste about 2 paragraphs of text but on the 3rd you cannot get to the last line of the input, it is hidden under the keyboard.

What if the text area is empty ?

The size is not coming back to normal

TO THIS ONE: (Look the current size)

you can use jquery
Html with class autoexpandtext

<div class="autoexpandtext">
    <textarea style="border: 0;width: 100%" (keyup)="resize()" 
            [(ngModel)]="CategoryDescription" name="CategoryDescription" 
            required rows="1" maxLength="500">

Function in your ts file

resize() {
    $('.autoexpandtext').on('change keyup keydown paste cut', 'textarea', function () {
1 Like

I saw this solution on stackoverflow


hope this helps :smiley:

1 Like

can you explain further how this works?