Hide footer when keyboard appear

1

Hi everyone,

I have an issue with the footer-bar, when an input is focused ( in the ion-content ) the keyboard appear and the footer stay above the keyboard. The thing is that it hides what is under the input, particularly in landscape mode, and so hide the popover that appear under the focused input.

Anyone know how to solve this problem? Can I hide the footer when the keyboard appear?

Thanks

3 Likes
2

With ionic keyboard plugin you can hide tags if the keyboard is open.

In my cases this not totally works, so you can look at your bodyā€¦ if the keyboard is open a class is added -> so you can build a css selector with this class and the ion-footer to hide footer or set height to 0.

greetz, bengtler

3

It seems to be exactly what I want.
Iā€™ll check this.

Thank you.

Edit : Yeah it seems to work, but even if the footer is hidden, A blank rectangle is still there above the keyboard. I donā€™t know what it is.

4

hmm strange.

i used this for an ios app and it works.
On which platform occurs the issue?

Otherwise you could try this:
If you have ion-content, ion-footer, ion-header -> the scrollcontent size is calculated by ionic.
If you hide the whole footer you can call $ionScrollDelegate.resize() in your controller to calculate correct ion-content height.

5

I use this on android platform.
I canā€™t test on iOS because I code on windows.
Iā€™m not good enough with Ionic and with the english language to understand totally what you mean but Iā€™ll check in the documentation.
Thanks.

6

Try to do this:

.keyboard-open .tabs{
  display:none;
  }
.keyboard-open .has-tabs{
 bottom:0;
 }
11 Likes
7

You can put hide-on-keyboard-open on the Footer - see http://ionicframework.com/docs/api/page/keyboard/

8

Using ion-footer-bar, Iā€™ve added that class:

<ion-footer-bar class="hide-on-keyboard-open">
  <div class="button-bar">
    <button class="button icon-right ion-pin">Post</button>
    <button class="button icon-right ion-person">My account</button>
    <button class="button icon-right ion-settings">Settings</button>
  </div>
</ion-footer-bar>

however although the element is hidden, it leaves a blank space of the same size as the footer at the bottom of the foreshortened screen that still overlaps the rest of the content.

Itā€™s less distracting than having the complete footer float on the top of the keyboard but still not the effect I was after

Is there something else I need to do to remove the footer altogether using this class?

3 Likes
9

I also face the same issue. Any help?

10

I found one solution, in your < ion-footer-bar > add the class ā€œhide-on-keyboard-openā€ and add in your css this lines:
body.keyboard-open .has-footer{
bottom: 0;
}
I hope this is useful for you

3 Likes
11

@calebcr This was really helpful, thank you! I think this should be the default behavior because otherwise adding the class ā€œhide-on-keyboard-openā€ is not really hiding the footer.

12

For me working. But with a lagā€¦ but working

thank you

13

Thanks, the solution is super

14

After facing the same issue with the delay, I did the following:

  1. Install Cordova Keyboard

  2. Put this in your app.run() function:

    $rootScope.$watch(function() {
    return $cordovaKeyboard.isVisible();
    }, function(value) {
    $rootScope.keyboardOpen = value;
    });

  3. add ng-hide=ā€œkeyboardOpenā€ in your footer element

  4. add ng-class="{ā€˜has-footerā€™: !keyboardOpen}" in your ion-content element

I have no delays anymore with this.

2 Likes
15

Sounds like a good idea @bwasnie1 but our tab bar includes ion-nav-views so all content will be hidden.

Unless there is a way to add the ng-hide programmatically to the div class=ā€œtabsā€ after it is created.

Hope the lovely people at ionic will include a fix for this, at the moment we have a 1 second delay before the footer slides down after the keyboard opens :frowning:

1 Like
16

hey frnd replace this code to your app.js file

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(false);

donā€™t say thanksā€¦

17

Hi @cannycookie, I have the same issue too. Have you get the solution? :frowning:

18

This worked for me. Thanks. They need to fix ā€˜keyboard-attachā€™ so that the scroll view realizes when the footer is covering an input and scrolls the additional 50px or so.

19

+1 to the css solution for Android, its an ionic css bug, when keyboard opens it should remove the bottom gap
the solution is to add to your css file the script
.keyboard-open .has-footer {
bottom: 0;
}

20

I kinda tried everything, I am using IONIC 2 so my footer looks like
<ion-toolbar position="bottom"> <button ptcolor clear> <ion-icon name='help'></ion-icon> </button> <button ptcolor clear> <ion-icon name='settings'></ion-icon> </button> </ion-toolbar>

i installed the keyboard plugin, tried to use the class=ā€œhide-on-keyboard-openā€, added css, nothing worked. Still have the footer when my keyboard is open. I even tried to change the HTML to put it the old way with an ion-footer-bar but still nothing worked.

If any of you guys still on this, would appreciate any help !

thanks !!