i am using ionic 4 and when the input has focus the keyboard shows and pushes the screen up and i am not able to scroll the html design smash and will not look good
hers the code i am using
<ion-header no-border>
<ion-toolbar>
<ion-row id="progressbar" class="top-bar">
<app-progress [progress]="loadProgress"></app-progress>
</ion-row>
<ion-buttons slot="start">
<ion-back-button class="back-button" *ngIf="back" mode="ios" icon="ios-
arrow-back" color="dark"
(click)="backSlide()"></ion-back-button>
</ion-buttons>
<ion-buttons slot="end" mode="md">
<ion-button class="page-numbering" mode="md">
<span class="first-page-number textBlack">{{pageNumber}}</span><span
class="second-page-number normal">/5</span>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [ngClass]="{'no-padding-div': isIonContent, 'padding-div': !isIonContent}"
force-overscroll="false" fixed="true">
<ion-slides [options]="slideOpts" #slides>
<ion-slide>
<ion-grid id="profileGrid">
<ion-row id="containerRow">
<ion-col no-padding>
<form [formGroup]="profileForm" class="formStyle">
<ion-row id="title-message" class="info-box-profile">
<ion-row class="welcome-title medium" justify-content-center><ion-label></ion-label></ion-row>
<ion-row class="welcome-sbtitle normal" justify-content-center><ion-label></ion-label></ion-row>
</ion-row>
<ion-row id="fname">
<p class="box-titles normal">What’s your first name?</p>
<ion-item mode="md">
<ion-input class="normal" formControlName="First_Name" placeholder="First name" id="name" mode="md"></ion-input>
</ion-item>
</ion-row>
<ion-row id="bday" align-items-start>
<p class="box-titles normal">When is your birthday?</p>
<ion-item mode="md">
<ion-datetime #picker class="normal timePicker" formControlName="Date_Of_Birth" displayFormat="MM/DD/YYYY"
Placeholder="Date of birth" pickerFormat="MM/DD/YYYY" [(ngModel)]="date"
(ionChange)="picktime($event)" mode="md"></ion-datetime>
<ion-icon class="arrow-down-icon" name="ios-arrow-down" slot="end"></ion-icon>
</ion-item>
</ion-row>
<ion-row align-items-start id="gender-title">
<p class="box-titles normal">Which one are you?</p>
</ion-row>
<ion-row id="gender-row" justify-content-center>
<ion-col align-self-center size="6">
<div (click)="female()" class="female" [ngClass]="{'female-image': gender == '', 'female-image1': gender == 'female', 'female-image2': gender == 'male'}">
</div>
</ion-col>
<ion-col align-self-center size="6">
<div (click)="male()" class="male" [ngClass]="{'male-image': gender == '', 'male-image1': gender == 'male', 'male-image2': gender == 'female'}">
</div>
</ion-col>
</ion-row>
<ion-row id="next-button" justify-content-center>
<ion-button class="cta" shape="round" color="secondary" expand="full"
[disabled]="(profileForm.valid) ? false : true" (click)="onClick()">
Next
</ion-button>
<!-- <ion-button class="cta" shape="round" color="secondary" expand="full"
[disabled]="(profileForm.valid && gender != '') ? false : true" (click)="onClick()">
Next
</ion-button> -->
</ion-row>
</form>
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
<ion-slide>
....
</ion-slides>
</ion-content>
when i click on the first name input the keyboard pushes the screen up and the content smashes, i tried many solution but none of them worked for me and i also added this in my app.module.ts
IonicModule.forRoot({
mode: 'ios',
scrollAssist: false,
scrollPadding: false,
}),