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?