Форма ввода перемещается вверх, когда сфокусировано

Question

Когда я фокусирую форму ввода, эта форма перемещается вверх по экрану.

Это для мобильного приложения на Ionic 3.

<ion-content>
<div class="bg" [hidden]="Keyboard.isOpen()"></div>
<div class="bg2"></div>
<p (click)=goToRegisterPage()>Sign up!</p>
<div class="form">
  <h3>Sign in</h3>
  <hr class="hr">
  <ion-item>
      <ion-label color="dark" floating>email</ion-label>
      <ion-input></ion-input>
  </ion-item>
  <ion-item>
      <ion-label color="dark" floating>password</ion-label>
      <ion-input></ion-input>
  </ion-item>  
  <button class="button-form">-> CONTINUE</button>
  <div class="separator-form">
    <hr>
    <h6>or</h6>
    <hr>
  </div>
  <img class="img-form" src="../../assets/imgs/icon -G+.png"/>
</div>
</ion-content>  

Я ожидаю, что форма недвигаться, когда я сфокусирован или когда клавиатура движется вверх.

Answer 1

Вам необходимо удалить следующую строку:

<div class="bg" [hidden]="Keyboard.isOpen()"></div>

атрибут [hidden] действует на свойство css display: block / none того DIV. Поэтому, когда клавиатура открыта, а это означает, что ввод имеет фокус, этот div исчезает.

Теперь, если вы хотите, чтобы Div все еще исчезал, не перемещая другие части страницы, вам нужно сделать следующее:

<div class="bg" [ngStyle]="{'visibility' : Keyboard.isOpen() ? 'hidden' : 'visible'}"></div>