nunoarruda nunoarruda - 1 year ago 555
TypeScript Question

In Ionic 2, how to float an element above the keyboard when the keyboard shows?

I want my message input bar to float above the keyboard when the keyboard shows but it looks like there's no keyboard-attach directive (like v1) in Ionic 2 yet (maybe in the works?). Is there any alternative/workaround?

Current behaviour:

Wanted behaviour:

Here's the code of my message input bar:

<ion-toolbar position="bottom" *ngIf="userIsAdmin">

<form (ngSubmit)="onSubmit(f)" #f="ngForm" class="message-form">

<ion-badge class="message-form-badge">Admin</ion-badge>

<ion-input type="text" placeholder="Type a message..." ngControl="messageInput"></ion-input>

<button type="submit" small class="message-form-button">Send <ion-icon name="send"></ion-icon></button>



Answer Source

The solution I ended up using and one that I'm satisfied with is:

  1. Removing Keyboard.disableScroll(true);
  2. Using a regular <input type="text"> instead of <ion-input type="text">

Works perfectly now!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download