Keyboard-attach in Ionic 2


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>



Making <ion-footer> (or anything) float above keyboard

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!



2.Using a regular <input type="text"> instead of <ion-input type="text">

save my times, Thanks you.


How to fix this problem with ion-input? Still have same problem in:
Ionic Framework Version: 2.0.0-beta.8


Yes, we really need a solution, please!


Bump! This is a problem for us also, it makes the UX quite annoying, would not like to do some workarounds just for this bug.

RC1 inconsistent Keyboard behavior & padding on iOS

How are handling it now ? I think in Beta 11, position=“bottom” doesn’t work… Thanks !!


The new syntax for a footer toolbar is:



Yes it is ! And how make it stick to the keyboard ?



Using Manduro’s custom directive :

Button attached above the keyboard

I am new to ionic 2. can you please let me know how to use this directive and where?



This directive is working for me on android but does nothing on iOS… any idea why?



Check this: