CODEWITHSUNDEEP
cssionic-frameworkionic2textareaionic3
Manuel RODRIGUEZ
Manuel RODRIGUEZ

Reputation: 2161

Make an ion-textarea scrollable when height is exceeding max-height

I am trying to implement a chat in my app.

I wrote an autosizing ion-textarea as follows: View

<ion-footer [keyboardAttach]="content">
  <ion-toolbar class="text-input">
    <ion-item no-lines>
      <ion-textarea autosize
        rows="1"
        placeholder="Votre message..."
        autocomplete="on"
        autocorrect="on"
        [(ngModel)]="message"
        >
      </ion-textarea>
      <button ion-button small icon-only round item-end color="secondary" (tap)="onSend()">
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-item>
  </ion-toolbar>
</ion-footer>

CSS

ion-footer {
    ion-toolbar.toolbar.toolbar-ios {
      &.toolbar:last-child {
        padding-bottom: 0px;
        height: auto;
      }
    }
    ion-item.item-textarea {
      background-color: transparent;
    }
    .text-input {
      height: auto;
      div.input-wrapper {
        background-color: #fff;
        border-radius: 20px;
        textarea.text-input {
          margin-left: 8px;
          max-height: 100px;
        }
      }
    }
  }

Directive

import {ElementRef, HostListener, Directive, OnInit, ViewChild} from '@angular/core';
import {Content} from 'ionic-angular';

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

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

  constructor(public element:ElementRef) {
  }

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

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

Everything works fine but the scrolling.

When I exceed the 100px max-height I cannot scroll in the ion-textarea... so if I want to correct the hidden part of my text it is impossible. Besides when I try to scroll it actually scrolls the chat (the ion-content)...

Any idea how I could solve this?

Upvotes: 3

Views: 9187

Answers (1)

Manuel RODRIGUEZ
Manuel RODRIGUEZ

Reputation: 2161

I solved it like this: .SCSS

.text-input {
      height: auto;
      div.input-wrapper {
        background-color: #fff;
        border-radius: 20px;
        textarea.text-input {
          margin-left: 8px;
          //overflow-y: auto;
          //max-height: 100px;
        }
      }
    }

And with a custom Autosize directive containing an adjust function:

adjust():void {
    let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    textArea.style.height = 'auto';
    if (textArea.scrollHeight < 100) {
      textArea.style.height = textArea.scrollHeight + "px";
      textArea.style.overflowY = 'hidden';
    } else {
      textArea.style.height = "100px";
      textArea.style.overflowY = 'auto';
    }

  }

Hope this will help someone else.

Upvotes: 8

Related Questions