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

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

I want the footer to always stay at the bottom.

What happens:

  • 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

 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?