Ion-footer: hide behind keyboard on mobile browser (ionic 4)

Ionic Framework
1

Hi everyone,

this is my first post on this forum, I hope I’m doing everything right.
I have been searching for solutions since a few days now, and have read probably all posts that have been made about this, but they all seem to only cover apps.

I have footers on many pages, simple ones like this:

<ion-content>
    <ion-card>
         ....
    </ion-card>
</ion-content>

<ion-footer no-border>
  <ion-toolbar>
    <ion-button expand="block" fill="solid" (click)="continue()">
      {{'Continue' | localize}}
    </ion-button>
  </ion-toolbar>
</ion-footer>

I want the footer to always stay at the bottom.

What happens:
As APP:

  • Opening the keyboard (e.g. by selecting an ion-input) moves the whole view up.
  • The footer also gets moved up. This is wrong.
  • –> Solution: ‘@ionic-native/keyboard/ngx’ to detect keyboard hide/show events
  • –> This works fine

beatthecity
beatthecity1080×2280 290 KB 

 this.keyboard.onKeyboardDidHide().subscribe(() => {
      this.keyboardHidden = true;
    });
 this.keyboard.onKeyboardWillShow().subscribe(() => {
      this.keyboardHidden = false;
    });

As mobile website:

  • Opening the keyboard (e.g. by selecting an ion-input) opens the keyboard without moving the view up, it justs hides it (Different behaviour than in app)
  • The footer gets moved up (Same as in app). This is wrong.
    –> Solution: none found until yet.
    –> Keyboard events do not trigger on a website, as it is a native library, and a website does not have native access.
    –> I tried a lot of different options in css, but it really messes up a lot of things in either the web or the app or both.

My question:
How can I always keep the footer bottom, with the keyboard overlapping it if needed?

firefox
firefox1080×2280 206 KB

2

Hi Kevin, I have the same issue. Have you managed to find a solution / workaround?

Thanks in advance!

3

Hi elongart,

for ionic web, no solution currently exists. Unfortunately web is poorly supported in many ways, but at least it seems like its a focus for ionic in 2020, with their new ionic for web milestone.

For apps I still use the native keyboard plugin to detect when the keyboard is shown and then hide the footer.

With the update last week, it seems that their might be a solution for this, released with the latest release Ionic 5.1.0.
Here is the pull request: https://github.com/ionic-team/ionic/pull/18478
Documenation is not live yet.

I already tried it out, its done like this:

  private subscribeToIonKeyboardEvents(): void {
    this._platform.keyboardDidShow.subscribe(ev => {
      // Do something with the keyboard height such as translating an input above the keyboard.
      const { keyboardHeight } = ev.detail;
      // Move input back to original location
      this.$keyboardHidden.next(false);
    });
    this._platform.keyboardDidHide.subscribe(() => {
      // Move input back to original location
      this.$keyboardHidden.next(true);
    });
  }

The notes says it works for Chrome 62+ and iOS 13+, but i didn’t get events on mobile Chrome.

But still, a silver lining that it eventually will work on browsers.

BR Kevin

4

Ionic now released a blog post of the new keyboard features I mentioned:

1 Like
5

Thanks Kevin!

I will take a look :slight_smile:

6

Hello Kevin great topic discussed with us because few days i have to try this but i don’t have any idea you gave me a idea to input this.

7

use this this service i make it may help :slight_smile:

 
<ion-footer *ngIf="isKeyboardHide" >
  <ion-button tappable fill="outline">
    {{'Cancel'| translate}}
  </ion-button>
</ion-footer>

   this.kboard.getkeyboardStatus().subscribe(isShow => {
      if (isShow != null) {
        this.isKeyboardHide = isShow;
        this.cdr.detectChanges();
      }

    });
1 Like