Keyboard-attach in Ionic 2


#1

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>

    </form>

</ion-toolbar>

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

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!


#3

This

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

save my times, Thanks you.


#4

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


#5

Yes, we really need a solution, please!


#6

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
#7

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


#8

The new syntax for a footer toolbar is:

<ion-footer>
    <ion-toolbar>
        ...
    </ion-toolbar>
</ion-footer>

#9

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


#10

WORKAROUND

Using Manduro’s custom directive :

https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754


Button attached above the keyboard
#11

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


#12

Hi,

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

Thanks


#13

Check this: