Android的Ionic webview使整个部门向上移动，同时点击输入框 [英] Ionic webview for android makes the whole division shift up while clicking on input boxed

问题描述

我正在使用Ionic v3.10，下面是我的登录HTML代码

I am using Ionic v3.10, below is my 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>

我申请的scss是

page-home
        {
            ion-grid, ion-card-content
                {
                    min-height: 100%;
                }
        }

此代码的问题是每当我运行命令 ionic serve -l <​​/ code>它呈现3个基本视图，即ios，android和windows。有两个输入框，一个用于用户名，第二个用于密码。每当我点击android视图中的输入框时，整个部门就会向上移动。

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.

但是当我在windows或ios窗口中点击它时，一切正常。我甚至尝试将离子修复应用到 ion-content 但是它会使整个ui缩小到50％

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%

可能是什么问题。

推荐答案

你能试试吗？告诉我们？

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-grid>
    </ion-content>

.scss

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

这篇关于Android的Ionic webview使整个部门向上移动，同时点击输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！