鍵盤將屏幕向上推離子2

Question

我正在開發一個離子2應用程序。 我的登錄頁面的html代碼如下：

<ion-header>
  <ion-navbar color="royal">
    <ion-title> Inicio de sesión </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="fondo">

  <img src="assets/markerBoy.png" class="logo"/>

  <ion-card center>

    <ion-card-header>
      Credenciales
    </ion-card-header>

    <ion-card-content>
      <form>
        <ion-list>
          <ion-item>
            <ion-label floating> Usuario: </ion-label>
            <ion-input type="text" [(ngModel)]="user" name="user"> </ion-input>
          </ion-item>
          <ion-item>
            <ion-label floating> Contraseña: </ion-label>
            <ion-input type="password" [(ngModel)]="password" name="password"> </ion-input>
          </ion-item>
        </ion-list>
        <div padding>
          <button ion-button block (click)="iniciarSesionValidar()" color="royal"> Entrar </button>
        </div>
      </form>
    </ion-card-content>

  </ion-card>

</ion-content>

我不知道為什么，但是當我在Android設備中運行應用程序時，屏幕看起來正確，但當我點擊用戶名輸入時，鍵盤出現並向上推屏幕。 我將向您展示兩個圖像，一個是沒有選中的圖像，另一個是我點擊用戶名輸入時的圖像。

正常屏幕

點擊輸入

任何的想法？

Answer 1

這個解決方案適用於Android，這是我正在尋找的！ 只需一件事，只需在android清單文件中進行更改即可。

添加標記屬性：

android:windowSoftInputMode="adjustPan"

在<activity XXXattributeXX>

例如：

<activity android:windowSoftInputMode="adjustPan" />

Answer 2

我做了以下成功：

1.）拋出你不想在離子固定容器內滾動的內容：

<ion-content class="fondo">
    <div ion-fixed>
        <img src="assets/markerBoy.png" class="logo" />

        <ion-card center>

            <ion-card-header>
                Credenciales
            </ion-card-header>

            <ion-card-content>
                <form>
                    <ion-list>
                        <ion-item>
                            <ion-label floating> Usuario: </ion-label>
                            <ion-input type="text" [(ngModel)]="user" name="user"> </ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating> Contraseña: </ion-label>
                            <ion-input type="password" [(ngModel)]="password" name="password"> </ion-input>
                        </ion-item>
                    </ion-list>
                    <div padding>
                        <button ion-button block (click)="iniciarSesionValidar()" color="royal"> Entrar </button>
                    </div>
                </form>
            </ion-card-content>

        </ion-card>
    </div>
</ion-content>

2.）我還閱讀了從離子輸入到標准輸入元素的更改修復了一些鍵盤問題。

Answer 3

我一直在處理這個問題但是使用Ionic 4.我通過將位置的CSS屬性設置為relative來修復它。

對我來說，我有一個按鈕，當我想要它在底部時，它一直在移動。 根據您指定的位置，它將始終相對於那些。

有趣的是，固定和絕對屬性與當前可用空間有關。 https://www.w3schools.com/css/css_positioning.asp