2

I have created a login form for my app with ionic 3, when I toggle the keyboard the content at the bottom moves to the top part.

This is my design for the screen when keyboard is not toggled. enter image description here

When the keyboard is toggled.

enter image description here

My html mockup

<ion-content text-center class="login">

    <!--top-->
    <form [formGroup]="valForm" (submit)="OnLogin($event, valForm.value)">
    <div padding class="animated fadeIn center-On-Screen" ion-fixed>
        <img class="logo" src="assets/img/logo.png">
        <ion-list padding>
            <ion-item>
                <ion-input type="email" placeholder="E-mail"
                 class="form-control"  name="email" 
                 autocomplete="off" formControlName="email"
                required></ion-input>
            </ion-item>

            <ion-item>
                <ion-input type="password" placeholder="Password"
                 name="password" 
                formControlName="password" required=""></ion-input>
            </ion-item>
            <ion-item>
                <div class="forgotpass" item-right (click)="Forgotpass()">Forgot password</div>
            </ion-item>

        </ion-list>


    </div>
        <div class="signin-content btn-holder" ion-fixed>
            <div class=" animated bounceInUp">
                <button ion-button block outline color="light" type="submit" [disabled]="!valForm.valid">Sign In</button>

            </div>
        </div>
    </form>

    <!--footer-->
    <div class="footer-content btn-holder" ion-fixed>
        <div class=" animated bounceInUp">
            <button ion-button block color="facebook" (click)="doFbLogin()">Facebook</button>

        </div>
    </div> 
    <div class="footer-signup signup">
        <div class="animated bounceInUp">
            <a color="light" (click)="Register()">New Here?
                <strong>Sign Up</strong>
            </a>
        </div>
    </div>

CSS for the positioning.

.signin-content {
    position: fixed;
    bottom: 20%;
    width: 100%;
 }
.footer-content {
    position: fixed;
    bottom: 12%;
    width: 100%;
}
.signup-content{
    position: fixed;
    bottom: 10%;
    width: 100%; 
}

How can I make it such that the content remain at the bottom.

My development environment.

cli packages: 

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 25.2.2
    ios-deploy        : 1.9.1 
    ios-sim           : https://registry.npmjs.org/ios-sim/-/ios-sim-5.0.12.tgz 
    Node              : v8.5.0
    npm               : 5.5.1 
    OS                : macOS High Sierra

Have tried this solution from this link Ionic native keyboard plus the solution below editing the config.xml but still didn't fix.

G B
  • 2,323
  • 3
  • 18
  • 32
  • Possible duplicate of [Ionic 2 Form goes up when keyboard shows](https://stackoverflow.com/questions/41161705/ionic-2-form-goes-up-when-keyboard-shows) – Duannx Jan 03 '18 at 02:07

1 Answers1

1

In your login.ts file add these:

import { Keyboard } from 'ionic-native';
import { Platform } from 'ionic-angular';

constructor(public platform: Platform, public keyboard: Keyboard) {

}

ionViewDidEnter() {
    this.platform.ready().then(() => {
        this.keyboard.disableScroll(true);
    });
}

There's another solution:

Open your config.xml file and add the following line in the platform name="android" tag:

<platform name="android"> 
  <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity windowSoftInputMode="adjustPan" /></edit-config>
  ...the rest of the android configs...
</platform>
mark
  • 177
  • 3
  • 14