ionic 3 -Клавиатура толкает весь экран

Question

, когда клавиатура открыла отверстие, и экран отклика столкнулся с проблемой

введите описание изображения здесь введите описание изображения здесь

<ion-content padding style="background: #B4838C; scroll-behavior: auto">
    <ion-grid style="height:100%;width:100% ; scroll-behavior: auto">
        <ion-row style="position:relative;top:5px; height:10%;max-height:10%;">
            <ion-col offset-1="" align-self-center="">
                <img src="../../assets/imgs/popUp.png" style="width: 10%" (click)="popNav()">
            </ion-col>
            <ion-col text-end="" align-self-center="">
                <button ion-button="" [full]="" class="btnStyle">
                    Change language
                </button>
            </ion-col>
</ion-row>
        <ion-row style="position:relative; height:50%;max-height: 60%; justify-content: center">
            <img src="../../assets/imgs/gr2.png" class="imgStyle">
        </ion-row>
        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col col-12="">
                <ion-item style="background: #232648">
                    <ion-input placeholder="Email" type="text"></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col col-12="">
                <ion-item style="background: #232648">
                    <ion-input placeholder="Password" type="Password"></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col col-12="">
                <ion-item style="background: #232648">
                    <ion-input placeholder="Full name" type="text"></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col col-12="">
                <ion-item style="background: #232648">
                    <ion-input placeholder="Phone number" type="text"></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>

        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col >
                <button  ion-button="" style="background: white;color: black; border-radius: 20px; width: 100%"> Sign In </button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

Я строю ионное приложение 3. У меня есть поле ввода, и когда я нажимаю на него, чтобы начать печатать что-либо, экран изменился ..

Answer 1

Измените свой app.module.ts файл, как показано ниже

 @NgModule({
    declarations: [
        MyApp,
        //...
    ],
    imports: [
        //...
        IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false
        })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // ...
    ]
})
export class AppModule { }