Ionic webview for android makes the whole division shift up while clicking on input boxed

Question

I am using Ionic v3.10, below is my login HTML code

    <ion-header>

        <ion-navbar>

        <ion-title>Login</ion-title>

        </ion-navbar>

    </ion-header>

    <ion-content padding>

        <ion-list>

            <ion-card>

                <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>

        </ion-list>

    </ion-content>

The problem with this code this that whenever I run the command

ionic serve -l

it renders the 3 basic views i.e ios, android, and windows. There are two input boxes one is for username and 2nd is for the password. Whenever I click on the input box in the android view the whole division shifts up.

But when I do the click in windows or ios windows it works all fine. I even tried applying

ion-fixed

to the

ion-content

but then it makes the whole ui shrinked to 50%

What might be the issue.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Can you try this and let us know?

.html

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col col-12>
        <ion-list>
            <ion-card>
                <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>
        </ion-list>
       </ion-col>
      </ion-row>
    </ion-content>

.scss

 page-my {
    ion-grid {
            min-height: 100%;
        }
  }

Ionic webview for android makes the whole division shift up while clicking on input boxed

Sign up