CODEWITHSUNDEEP
ioskeyboardionic3cordova-plugins
Alston Sahyun Kim
Alston Sahyun Kim

Reputation: 165

ionic3 allow keyboard to push view up

I'm using Ionic ver 3.9.2

I'd like to push the view up on iOS so my footer is not hidden.

enter image description here

Don't want the keyboard to cover my footer

enter image description here

On Android, I can use android:windowSoftInputMode="adjustResize" and this magically shrink the view. Is there any way to achieve this? enter image description here

Upvotes: 2

Views: 213

Answers (1)

DGS
DGS

Reputation: 6025

You can use the onKeyboardShow() and onKeyboardHide() of the Ionic Keyboard Plugin to know when to resize the screen to exclude the keyboard.

Try making the following changes and see if it does what you want. You will need to tweak the keyboard_height and the easing to properly get this working

app.html

<ion-nav .... [style.height]="nav_style"></ion-nav>

app.component.ts

keyboard_height: number = 200;
nav_style: string = null;

constructor(private keyboard: Keyboard, private platform: Platform, ...){
    if(this.platform.is('ios')){
        this.keyboard.onKeyboardShow(() => {
            this.nav_style = 'calc(100%-' + this.keyboard_height + 'px)';
        });
        this.keyboard.onKeyboardHide(() => {
            this.nav_style = null;
        });
    }
}

app.scss

ion-nav{
    transition: height 0.2s ease-out
}

Upvotes: 3

Related Questions