0

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

enter image description here

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

enter image description here

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?

Setu Kumar Basak
  • 11,460
  • 9
  • 53
  • 85

2 Answers2

0

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

  android:windowSoftInputMode="adjustPan"
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
-1

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.

CodeChanger
  • 7,953
  • 5
  • 49
  • 80