Ionic 4 - Keyboard covers the input field inside a form

app.module.ts `import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { Pedometer } from '@ionic-native/pedometer/ngx'; import { Stepcounter } from '@ionic-native/stepcounter/ngx'; import { NgCircleProgressModule } from 'ng-circle-progress'; import { Network } from '@ionic-native/network/ngx'; import { StorageProvider } from './providers/storage/storage.service'; import { IonicStorageModule } from '@ionic/storage'; import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; import { Keyboard } from '@ionic-native/keyboard/ngx'; import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; import { TokenInterceptor } from './providers/service/token.interceptor'; import { ServiceProvider } from './providers/service/service.service'; import { SetReminderComponent } from './components/set-reminder/set-reminder.component'; import { ReactiveFormsModule } from '@angular/forms'; import { ReminderDetailsComponent } from './components/reminder-details/reminder-details.component'; import { TextToSpeech } from '@ionic-native/text-to-speech/ngx'; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { LocalNotifications } from '@ionic-native/local-notifications/ngx'; import { Push } from '@ionic-native/push/ngx'; import { SocialSharing } from '@ionic-native/social-sharing/ngx';

@NgModule({ declarations: [ AppComponent, SetReminderComponent, ReminderDetailsComponent, ], entryComponents: [ SetReminderComponent, ReminderDetailsComponent ], imports: [ BrowserModule, IonicModule.forRoot(), IonicStorageModule.forRoot(), AppRoutingModule, // Specify ng-circle-progress as an import NgCircleProgressModule.forRoot({ // set defaults here radius: 100, outerStrokeWidth: 16, innerStrokeWidth: 8, outerStrokeColor: "#78C000", innerStrokeColor: "#C7E596", animationDuration: 300, }), HttpClientModule, ReactiveFormsModule, BrowserAnimationsModule ], providers: [ StatusBar, SplashScreen, Pedometer, Stepcounter, Network, StorageProvider, InAppBrowser, Keyboard, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }, ServiceProvider, TextToSpeech, LocalNotifications, Push, SocialSharing ], bootstrap: [AppComponent] }) export class AppModule { } `

app.component.ts `import { Component, ViewChild } from '@angular/core';

import { Platform, NavController, Events, IonRouterOutlet, AlertController, MenuController, LoadingController } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { Config } from './app.config'; import { Keyboard } from '@ionic-native/keyboard/ngx'; import { StorageProvider } from './providers/storage/storage.service'; import { LoginService } from './providers/login/login.service'; import { CommonPopoverService } from './providers/common-popover/common-popover.service'; import { Push, PushObject, PushOptions, } from '@ionic-native/push/ngx'; import { PushNotificationService } from './providers/push-notification/push-notification.service';

@Component({ selector: 'app-root', templateUrl: 'app.component.html' }) export class AppComponent { userName: string; public appPages = Config; exitAlert: any; logoutLoading: any; deviceId: any; @ViewChild(IonRouterOutlet) routerOutlet: IonRouterOutlet;

constructor( private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar, private navCtrl: NavController, private events: Events, private keyboard: Keyboard, private alert: AlertController, private keystore: StorageProvider, private menu: MenuController, private loginService: LoginService, private loader: LoadingController, private commonPopover: CommonPopoverService, private push: Push, private pushService: PushNotificationService ) { this.initializeApp(); }

/**

App initialization */ initializeApp() { this.platform.ready().then(() => { this.keyboard.hideFormAccessoryBar(false); // this.keyboard.disableScroll(false); this.statusBar.styleDefault(); // Let status bar overlay webview this.statusBar.overlaysWebView(true); // Set status bar to white this.statusBar.backgroundColorByHexString('#78C000'); this.splashScreen.hide(); this.getUserName(); this.pushSetup();

//User name information this.events.subscribe('user:info', message => { this.getUserName(); })

//Login event this.events.subscribe('user:login', (form) => { this.getUserName(); this.keystore.set("isAuthenticated", true); this.navCtrl.navigateRoot("/home"); if (this.deviceId) { this.pushService.registerForPushNotification(this.deviceId).then((response) => { console.log(response); }); } });

//Logout event this.events.subscribe('user:logout', message => { this.loginService.logout().then(result => { this.commonPopover.toastPopOver(message); this.commonPopover.loaderDismiss(); this.navCtrl.navigateRoot('/login')//navigate to login this.events.publish('homePageDataLoaded', false); }) })

//Back button click this.platform.backButton.subscribe(() => { if (this.routerOutlet && this.routerOutlet.canGoBack()) { this.routerOutlet.pop(); } else { return this.onBackButton(); } }) }); }

pushSetup() {

// to check if we have permission this.push.hasPermission() .then((res: any) => {
```
if (res.isEnabled) {
  console.log('We have permission to send push notifications');
} else {
  console.log('We do not have permission to send push notifications');
}
```
});

// Create a channel (Android O and above). You'll need to provide the id, description and importance properties. this.push.createChannel({ id: "testchannel1", description: "My first test channel", // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest. importance: 3 }).then(() => console.log('Channel created'));

// Delete a channel (Android O and above) this.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted'));

// Return a list of currently configured channels this.push.listChannels().then((channels) => console.log('List of channels', channels))

// to initialize push notifications

const options: PushOptions = { android: { senderID: "794988011253", sound: true, vibrate: true, icon: 'ic_notification', iconColor: '#78C000', forceShow: true }, ios: { alert: 'true', badge: true, sound: true, clearBadge: true }, windows: {}, browser: { pushServiceURL: 'http://push.api.phonegap.com/v1/push' } }

const pushObject: PushObject = this.push.init(options);

pushObject.on('notification').subscribe((notification: any) => { console.log('Received a notification', notification); if (notification.additionalData.foreground) { //console.log("notificaton foreground",data);
```
// if application open, show popup

this.commonPopover.alertPopOver(notification.message, notification.title)
```
} else { //if user NOT using app and push notification comes //TODO: Your logic on click of push notification directly // this.onPushNotificationClicked(data);
```
//console.log('Push notification clicked');
```
} });

pushObject.on('registration').subscribe((registration: any) => { console.log('Device registered', registration); this.deviceId = registration.registrationId });

pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error)); }

/**
Getting the user name. */ getUserName() { this.keystore.get("userName").then(user => { if (user) this.userName = user; }) }

/**
Logout confirmation alert box */ goToLogout() { this.commonPopover.alertPopOver('Do you really want to logout?', 'Logout confirmation').then(data => { if (data) { this.menu.close().then(() => { this.logoutLoader(); }) } }) }

/**
Logout loader */ logoutLoader() { this.commonPopover.loaderPresent('Logging Out...'); let message = 'Successfully logged out'; if (this.deviceId) {

this.pushService.deletePushNotificationToken(this.deviceId).then((response) => { }).catch((err) => { this.commonPopover.toastPopOver("Unable to delete token"); }).then(() => {
```
this.events.publish('user:logout', message)
```
}) } else { this.events.publish('user:logout', message)

} }

/**
Unsubcribe logout event */ ngOnDestroy() { this.events.unsubscribe('user:logout') }

/**
Confirmation alaert to exit app on back button press
when no more page is present */ onBackButton() { this.commonPopover.alertPopOver('Do you want to exit?', 'Exit App').then(data => { if (data) { navigator['app'].exitApp(); } }) } } `

package.json { "name": "PersonalHealthAssistant", "version": "0.0.1", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^8.2.3", "@angular/common": "^7.2.2", "@angular/core": "^7.2.2", "@angular/forms": "^7.2.2", "@angular/http": "^7.2.2", "@angular/platform-browser": "^7.2.2", "@angular/platform-browser-dynamic": "^7.2.2", "@angular/router": "^7.2.2", "@ionic-native/core": "^5.0.0", "@ionic-native/firebase": "^5.9.0", "@ionic-native/in-app-browser": "^5.6.1", "@ionic-native/keyboard": "^5.6.1", "@ionic-native/local-notifications": "^5.12.0", "@ionic-native/network": "^5.5.1", "@ionic-native/pedometer": "^5.5.1", "@ionic-native/push": "^5.12.0", "@ionic-native/social-sharing": "^5.12.0", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic-native/stepcounter": "^5.5.1", "@ionic-native/text-to-speech": "^5.10.0", "@ionic/angular": "^4.1.0", "@ionic/pro": "2.0.4", "@ionic/storage": "^2.2.0", "cordova-android": "^7.1.4", "cordova-plugin-badge": "0.8.8", "cordova-plugin-device": "^2.0.2", "cordova-plugin-inappbrowser": "3.0.0", "cordova-plugin-ionic-keyboard": "^2.1.3", "cordova-plugin-ionic-webview": "^4.0.1", "cordova-plugin-local-notification": "0.9.0-beta.2", "cordova-plugin-network-information": "2.0.1", "cordova-plugin-pedometer": "0.4.1", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-stepcounter": "1.0.1", "cordova-plugin-tts": "^0.2.3", "cordova-plugin-whitelist": "^1.3.3", "cordova-plugin-x-socialsharing": "^5.4.7", "cordova-sqlite-storage": "3.2.0", "cordova-support-google-services": "^1.1.0", "core-js": "^2.5.4", "es6-promise-plugin": "^4.2.2", "jwt-decode": "^2.2.0", "moment": "^2.24.0", "ng-animate": "^0.3.4", "ng-circle-progress": "^1.4.0", "phonegap-plugin-multidex": "^1.0.0", "phonegap-plugin-push": "^2.2.3", "rxjs": "~6.5.1", "tslib": "^1.9.0", "zone.js": "~0.8.29" }, "devDependencies": { "@angular-devkit/architect": "~0.13.8", "@angular-devkit/build-angular": "~0.13.8", "@angular-devkit/core": "~7.3.8", "@angular-devkit/schematics": "~7.3.8", "@angular/cli": "~7.3.8", "@angular/compiler": "~7.2.2", "@angular/compiler-cli": "~7.2.2", "@angular/language-service": "~7.2.2", "@ionic/angular-toolkit": "~1.5.1", "@types/node": "~10.14.2", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~8.1.0", "tslint": "~5.16.0", "typescript": "~3.1.6" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": { "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" }, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-network-information": {}, "cordova-sqlite-storage": {}, "cordova-plugin-inappbrowser": {}, "cordova-plugin-local-notification": {}, "cordova-plugin-tts": {}, "phonegap-plugin-push": { "ANDROID_SUPPORT_V13_VERSION": "27.+", "FCM_VERSION": "11.6.2" }, "cordova-plugin-x-socialsharing": { "ANDROID_SUPPORT_V4_VERSION": "24.1.1+" } }, "platforms": [ "android" ] } }

ionic info `Ionic:

Ionic CLI : 5.2.5 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.3.1 @angular-devkit/build-angular : 0.13.8 @angular-devkit/schematics : 7.3.8 @angular/cli : 7.3.8 @ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 7.1.4 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 14 other plugins)

Utility:

cordova-res : not installed native-run : 0.2.8

System:

Android SDK Tools : 26.1.1 (/Users/daffolapmac-07/Library/Android/sdk/) NodeJS : v8.11.3 (/usr/local/bin/node) npm : 5.6.0 OS : macOS Mojave`

login.page.html `

Password

        </ion-list>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <ion-button class="login-btn" expand="block" fill="clear" (click)="goToForgotPassword()">Forgot Password?
        </ion-button>
        <ion-button class="login-btn txt-white" type="submit" expand="block" [disabled]="!loginForm.valid"
          (click)="goToLogin(loginForm.valid)">Login</ion-button>
        <ion-button class="login-btn" expand="block" fill="outline" (click)="goToSignUp()">Create New Account
        </ion-button>
      </ion-col>
    </ion-row>

  </form>
</div>

ionic-team / cordova-plugin-ionic-keyboard

Ionic 4 - Keyboard covers the input field inside a form #110

when no more page is present */ onBackButton() { this.commonPopover.alertPopOver('Do you want to exit?', 'Exit App').then(data => { if (data) { navigator['app'].exitApp(); } }) } } `

Android SDK Tools : 26.1.1 (/Users/daffolapmac-07/Library/Android/sdk/) NodeJS : v8.11.3 (/usr/local/bin/node) npm : 5.6.0 OS : macOS Mojave`