Search code examples
ionic-frameworkionic4angular8progressive-web-apps

Ionic 4 & Angular 8 PWA - Hide the footer in Android browsers

I'm creating a PWA with Angular 8 and Ionic 4. I'm using 'ion-fab' , but in Android browsers the keyboard pushes the component.

I have seen that in Ionic Native you can manage the keyboard control with Cordova (Hide Footer When keyboard is opened ionic4), but I need it to be for PWA. Is there any solution? 

<ion-content>
</ion-content>
<ion-footer>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
   <ion-fab-button>
     <ion-icon name="add"></ion-icon>
   </ion-fab-button>
  </ion-fab>
</ion-footer>
Solution

  • Unfortunally there is no way to avoid viewport resizing on Android when the keyboard is opened, even implementing the @ionic-native/keyboard plugin on a standalone app. So you will need to workround this, there is a couple options you may choose:

    • When the keyboard opens/close the resize event is fired. You can make use of it to apply changes procedurally, however, this event is also triggered by other actions.

    • Make use of CSS media queries to hide some components when the body height is less than expected.

    • Get the window innerHeight value when the app starts and set the body element with a fixed height:

    this.platform.ready().then(() => {
    document.body.style.height = `${window.innerHeight}px`;
}

    Also remember to update your meta-tags to avoid enforce the desired viewport behaviour:

    <meta name="viewport" content="viewport-fit=cover, width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />