3

When I am typing long text, the ion-input field stays at the same height and I can only see the text in the available visible area. As I type, I want the input field to auto-resize vertically to 2 lines or 3 lines according to the data in it.

My page.html code:

  <ion-item>
    <ion-input placeholder="type message here"></ion-input>
  </ion-item>

I am attaching a screenshot to clarify what I am trying to explain:

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
user2828442
  • 2,415
  • 7
  • 57
  • 105
  • Why not use `` instead, seems to fit the intended purpose... – Michael Doye Nov 29 '17 at 07:53
  • purpose is to use on a chat window, if text is more the field expands, i dont need a expanded field by default..hope my answers solves your query – user2828442 Nov 29 '17 at 07:57
  • I understand. I guess you could try [this solution](https://forum.ionicframework.com/t/solved-ion-textarea-resize-height-dynamically/80885/2) on an `input`, but since `input`s are inherently designed _not_ to be multi-line I honestly think you would have more luck with a `textarea`. – Michael Doye Nov 29 '17 at 08:03

2 Answers2

6

Based on this amazing repo you can create a custom directive to handle that for you.

Just like you can see in this working Stackblitz project, that directive would look like this:

import { ElementRef, HostListener, Directive, OnInit } from '@angular/core';

@Directive({
  selector: 'ion-textarea[autosize]'
})

export class Autosize implements OnInit {
  @HostListener('input', ['$event.target'])
  onInput(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }

  constructor(public element:ElementRef) {
  }

  ngOnInit():void {
    setTimeout(() => this.adjust(), 0);
  }

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

And that's it! In order to see it in action, you can use it in any page like this:

Component

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  dummyText: string = `Type a longer text to see how this expands!`;

  constructor(public navCtrl: NavController) { }

}

View

<ion-header>
  <ion-navbar>
    <ion-title>Autosizing Textarea</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <!-- Use rows="1" to initialize it as a single line text-area -->
    <ion-textarea rows="1" name="dummyText" [(ngModel)]="dummyText" autosize></ion-textarea>
  </ion-item>
</ion-content>
sebaferreras
  • 44,206
  • 11
  • 116
  • 134
  • 1
    This looks ok, but I need a tweak, as I am typing in blitz, the text box is expanding down words, I want it to expand upwards... Can you modify that – user2828442 Nov 29 '17 at 08:57
  • Please take a look at the Stackblitz project now... I guess that by just placing the `text-area` inside of an `ion-footer` you can achieve that. – sebaferreras Nov 29 '17 at 09:03
  • 1
    For Ionic 3, remember to add `Autosize` to the page's module.ts `declarations` section – nak Nov 05 '18 at 17:37
  • sadly selecting text by tapping on a word to jump with the cursor to that position doesn't seem to work. (ionic3/android) – Yannic Hamann Jun 24 '19 at 08:04
0

You can use the ion-textarea component. https://ionicframework.com/docs/api/components/input/Input/

Bastian Hofmann
  • 2,485
  • 19
  • 19