[SOLVED] Ion-textarea resize height dynamically

Ionic Framework ionic-v3
21

@hiepxanh4h

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
22

thanks for point me out. you are right

1 Like
23

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

1 Like
24

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';
	return;
}

Cheers
Unkn0wn0x

10 Likes
25

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';
		return;
}
4 Likes
26

@reedrichards
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

27

Not like this, not enough information.

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

28

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

29
30

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

31

Thanks man! It worked :slight_smile:

32

Thank you for shared this solution

33

This works wonderfully with my ionic v2 project :slight_smile:

34

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;
     return;
 }

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

1 Like
35

Accurate solution :ok_hand:
thanks buddy

36

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.

37

What if the text area is empty ?

The size is not coming back to normal
FROM:
image

TO THIS ONE: (Look the current size)
image

38

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">
    </textarea>
 </div>

Function in your ts file

resize() {
    $('.autoexpandtext').on('change keyup keydown paste cut', 'textarea', function () {
      $(this).height(0).height(this.scrollHeight);
    }).find('textarea').change();
 }
1 Like
39

I saw this solution on stackoverflow

DEMO

hope this helps :smiley:

1 Like
40

can you explain further how this works?