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

@KevinB1 wrote:

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

 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?

firefox1080×2280 206 KB

firefox1080×2280 206 KB

Posts: 1

Participants: 1

Read full topic