Keyboard-attach in Ionic 2

Ionic Framework ionic-v3
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:
image

Wanted behaviour:
image

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>
5 Likes
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!

2 Likes
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.

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>
1 Like
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

1 Like
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:

2 Likes