I am currently working with Ionic version 3.10 and have included the following login HTML code:
<ion-content>
<ion-grid>
<ion-row>
<ion-col col-12>
<ion-list>
<ion-card>
<ion-card-header>
<ion-img style="background-color: transparent; display: block; margin: auto;" height="100" width="100" src="assets/logo.png" alt="iBin"></ion-img>
</ion-card-header>
<ion-card-content>
<ion-item ion-fixed>
<ion-label floating>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item ion-fixed>
<ion-label floating>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
<ion-item>
<!-- <button ion-button color="secondary" outline padding >Login</button> -->
<button ion-button color="secondary" outline padding block round (click)="login()">Login</button>
</ion-item>
</ion-card-content>
</ion-card>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The SCSS styling I applied is as follows:
page-home
{
ion-grid, ion-card-content
{
min-height: 100%;
}
}
When testing this code using ionic serve -l, I encounter a rendering issue where the Android view causes the division to shift up when clicking on an input box. This behavior is not observed in the Windows or iOS views. I attempted to use ion-fixed on the ion-content, but it resulted in the UI shrinking to 50%. What could be causing this issue?