0

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>
David
  • 15
  • 6

1 Answers1

0

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" />
David R.
  • 351
  • 1
  • 7