Cordova plugin ionic keyboard crashes the layout

Question

I am using cordova-plugin-ionic-keyboard plugin for keyboard in my Ionic3/Angular app. My Ui looks like below before the keyboard appears:

But, when the keyboard appears it crashes the layout of the application like below:

Then, i tried to halt the resize of the layout in the config.xml using below code:

<preference name="KeyboardResize" value="false" />

But, still the UI breaks. Then tried all the three combination of KeyboardResizeMode but still UI breaks.

<preference name="KeyboardResizeMode" value="body" />
<preference name="KeyboardResizeMode" value="ionic" />
<preference name="KeyboardResizeMode" value="native" />

My HTML codes:

<ion-content>
  <ion-grid class="login-grid">
    <ion-row>
      <ion-col>
        <ion-label class="sign-in-label text-center">SIGN IN</ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="padding-left-30 padding-right-30">
        <ion-item class="wrapper border-radius-23">
          <ion-label class="email-label">
            <ion-icon name="person" class="text-red"></ion-icon>
          </ion-label>
          <ion-input clearInput type="text" placeholder="Email" class="user-email-input"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="padding-left-30 padding-right-30">
        <ion-item class="wrapper border-radius-23">
          <ion-label class="email-label">
            <ion-icon name="lock" class="text-red"></ion-icon>
          </ion-label>
          <ion-input clearInput type="text" placeholder="Password" class="user-email-input"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="padding-left-30 padding-right-30">
        <button ion-button class="sign-in-btn">SIGN IN</button>
      </ion-col>
    </ion-row>
    <div class="text-center">
      <a class="forgot-password">Forgot Password?</a>
    </div>
    <ion-row class="padding-top-5">
      <ion-label class="or-sign-in-label text-center">OR SIGN IN WITH</ion-label>
    </ion-row>
    <ion-row class="padding-left-30 padding-right-30">
      <ion-col col-4>
        <button ion-button class="padding-0 text-none width-100 border-radius-23 facebook-btn">
          <ion-icon name="logo-facebook" class="padding-right-5 padding-left-5"></ion-icon>
          facebook
        </button>
      </ion-col>
      <ion-col col-4>
        <button ion-button class="padding-0 text-none width-100 border-radius-23 twitter-btn">
          <ion-icon name="logo-twitter" class="padding-right-5 padding-left-5"></ion-icon>
          twitter
        </button>
      </ion-col>
      <ion-col col-4>
        <button ion-button class="padding-0 text-none width-100 border-radius-23 google-btn">
          <ion-icon name="logo-google" class="padding-right-5 padding-left-5"></ion-icon>
          google
        </button>
      </ion-col>
    </ion-row>
    <ion-row class="text-center">
      <ion-col>
        <ion-label class="no-account">Don't have an account yet?<span class="sign-up-a padding-left-5">SIGN UP</span></ion-label>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Can anyone point me out how to avoid UI breaking when Keyboard appears in the screen?

can you please post your HTML code so we can get idea which ion components you have used here? — CodeChanger, Mar 23 '18 at 09:48

score 0 · Accepted Answer · answered Mar 25 '18 at 17:03

0

Change in the AndroidManifest.xml file did the trick for me :).

  android:windowSoftInputMode="adjustPan"

answered Mar 25 '18 at 17:03

Setu Kumar Basak

11,460
9
53
85

This makes that the keyboard appears and the height of all page does not change so, if there are inputs below that space that keyboard fills, the user can not reach it because there is no scroll. – monikaja Dec 18 '20 at 13:48

score -1 · Answer 2 · answered Mar 23 '18 at 12:15

Base on your code I think you need to disable scroll while keyboard will show.

Step1: In your app.module.ts set scrollAssist and autoFocusAssist to false in the root config object

Update Imports array

imports: [
    IonicModule.forRoot(MyApp
      /*
       * MODIFY BOOTSTRAP CODE BELOW
       * Adds a config object that disables scrollAssist and autoFocusAssist for iOS only
       * https://github.com/driftyco/ionic/issues/5571
       */
      , {
        platforms : {
          ios : {
            // These options are available in ionic-angular@2.0.0-beta.2 and up.
            scrollAssist: false,    // Valid options appear to be [true, false]
            autoFocusAssist: false  // Valid options appear to be ['instant', 'delay', false]
          }
          // http://ionicframework.com/docs/v2/api/config/Config/)
        }
      }
      /*
       * END MODIFY
       */
    )
  ],

Step2: In your app.component.ts disableScroll of the Ionic Keyboard Plugin as per below sample.

export class HomePage {
constructor(public navCtrl: NavController) {
    platform.ready().then(() => {
       this.keyboard.disableScroll(true);
    });
}
}

Try this once.

I have seen this https://gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7 link before.. It's not working — Setu Kumar Basak, Mar 23 '18 at 16:56

Cordova plugin ionic keyboard crashes the layout

2 Answers2