Elastic Textarea with max-Height

Ionic Framework ionic-v3
1

Hi,
I looked around for a proper solution to my problem.
I found a way to have a elastic Textarea but my issue is that the height of that textfield can be infinte. I need to limit the max-height to 1/3 of the screen.

This is what I´m using to have the elastic Textarea, but I can´t limit it.

Does someone have a solution to that ?

Regards!

2

You could just modify the directive you are using to accept a max height as an @Input or if you aren’t too comfortable with that, you could just hard code the change in:

  private adjust(): void {
    if (!this.textareaEl) {
      return;
    }

    this.textareaEl.style.height = 'auto';
    this.textareaEl.style.height = this.textareaEl.scrollHeight + "px";
  }

Before assigning style.height just check if textareaEl.scrollHeight is greater than whatever your max limit is. If it is, use the max height instead of the current scrollHeight.

Also, it’s not really a big issue in this case, but wherever possible it is a good idea to use Ionic’s DomController to perform reads and writes, and it’s also a good idea to use Renderer for style updates. For example, this is a snippet from a similar directive that I wrote:

	resize(textarea) {

		let newHeight;

		this.domCtrl.read(() => {
			newHeight = textarea.scrollHeight;
		});

		this.domCtrl.write(() => {
			this.renderer.setElementStyle(textarea, 'height', newHeight + 'px');
		});

	}
1 Like