Keyboard blocks footer

ionic-v1
1

I try my app on an android device and the keyboard blocks the input box in the footer bar.My cordova version is 3.3
I remember if i set fullscreen=false in config.xml then the problem would disappear but it doesn’t work now.
how can i solve it?
before keyboard

after keyboard

This’s a modal

1 Like
2

There is code in ionic that adds the class hide-footer to the body when the keyboard is shown in android. You could try adding a custom class to your footer say “my-footer” and then adding this css should override the offending platform css

.hide-footer .my-footer.bar-footer {
display: flex;
}

Here is pen http://codepen.io/anon/pen/AFbJz

1 Like
3

Em…I’m sorry that it doesn’t work. it’s still the same.

4

Are you saying the pen doesn’t work or adding the code from the pen doesn’t work?

If you are talking about the pen make sure you toggle the toggles. They add the hide-footer class to the body and the my-footer class to the footer. I made them toggles to show the effect.

If you are saying it doesn’t work when run on the actual android device it could be related to the android:windowSoftInputMode setting on your activity in the AndroidManifiest.xml. It should probably be set to “adjustResize” to do what you want.

Beyond that we are going to need a lot more info than “it doesn’t work”

5

As an additional info this bug https://code.google.com/p/android/issues/detail?id=5497 seems to point to the fact that adjustResize is broken in fullscreen apps which would explain why setting fullscreen=false once fixed it for you.

I would suggest you will still need both solutions though. fullscreen=false and the custom class/css to override the hide-footer.

6

Thanks for your answering! I’m sorry that i didn’t explain it clearly. What i meant was that it didn’t work on the actual device even i set android:windowSoftInputMode to “adjustResize”

7

The only other thing I can suggest without seeing your code is to make sure that the android:windowSoftInputMode attribute is on the <activity> element in your AndroidManifest.xml. For some reason cordova/phonegap by default puts on the <manifest> element??

8

After i upgrade to cordova 3.4.0 , the input box even disappear if i use css solution! How fun!

9

First, thanks for all the info in this post.

I am running Cordova 3.4.0 and the CSS fix works for me.

/edit
I forgot to add that the fix works for me on Android running Cordova 3.4.0 - I haven’t tested on iOS yet but I don’t think the issue exists on iOS.

10

Hi,

I have fixed this issue by this workaround: In the ionic js there is a line …

document.body.classList.add(‘hide-footer’);

I have removed this line, then it works.

Regards,

Mike

11

Oh… why can’t i fix it !! i can only use my own footer class to set the position!

12

FYI: .hide-footer is now .footer-hide
see: https://github.com/driftyco/ionic/commit/dccf7b41823228c52a3b0d08e0da8b8604c9012d

2 Likes