Ionic 2 <ion-content> height dynamically changes while showing keyboard on device


#1

I accidentally discovered out that <ion-content> vertical size changes if I’m clicking an input field and device keyboard appears. After I closing keyboard - the height is still bigger that needed (and bigger than it was before) and I could scroll verticaly far beyond the visible area.
It looks like that framework adds some height to the <ion-content> to make sure that keyboard will not overflow available controls. But after hidding keyboard it should return to normal height, I believe…
Please advice - are any polyfills to fix that?
Here is my html code, nothing special - just a basic authentication form

<ion-content *ngIf="!auth.authenticated()" scroll="false">

    <div padding>
        <ion-segment [(ngModel)]="authType">
            <ion-segment-button value="login">
                Вход
            </ion-segment-button>
            <ion-segment-button value="signup">
                Регистрация
            </ion-segment-button>
        </ion-segment>
    </div>
    
    <div [ngSwitch]="authType">
        <form *ngSwitchWhen="'login'" #loginCreds="ngForm" (ngSubmit)="login(loginCreds.value)">
            <ion-item>
                <ion-label floating>Email</ion-label>
                <ion-input type="email" [(ng-model)]='user.username' value="{{user.username}}"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label floating>Пароль</ion-label>
                <ion-input type="password"></ion-input>
            </ion-item>
            <div padding>
                <button block>Войти</button>
            </div>
        </form>
        
        <!--Or we could switch to register New user form-->
        <form *ngSwitchWhen="'signup'" #signupCreds="ngForm" (ngSubmit)="signup(signupCreds.value)">
            <ion-item>
                <ion-label floating>Email</ion-label>
                <ion-input type="email" ngControl="username"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label floating>Пароль</ion-label>
                <ion-input type="password" ngControl="password"></ion-input>
            </ion-item>
            
            <ion-item>
                <ion-label floating>Повторите пароль</ion-label>
                <ion-input type="password" ngControl="repeatPassword"></ion-input>
            </ion-item>
            
            <div padding>
                <button block type="submit">Зарегистрироваться</button>
            </div>
            
        </form>
    </div>
    <!-- end of ngSwitch directive-->

</ion-content>

#2

Could you check for an open issue on this, this has come up before I believe. If there’s no open issue, could you open one? Thanks :smile:


#3

The canonical issue for extra component padding sticking around after keyboard interaction is https://github.com/driftyco/ionic/issues/5432.

@fredy26, I’ve chosen a workaround that turns off the ionic-internal keyboard padding and falls back to the device native behavior. You might be able to make use of my notes in another forum thread: