Ionic 3 - Клавиатура толкает контент вверх и поверх другого контента без причины

Question

Я работаю над простым приложением в Ionic.

У меня проблема в том, что клавиатура толкает мое поле ввода вверх и через другой элемент div, когда для клавиатуры достаточно места.Как это исправить?Я уже посмотрел в Интернете, но не смог найти решение моей проблемы.

Вот что происходит:

Как видите, текст изображен на картинке, и нет причин, по которым он так высок.Под ним больше, чем достаточно места.

Это мой код:

HTML:

<ion-header>

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

</ion-header>


<ion-content padding class="login content">

  <div class="logo-container">
      <img src="assets/imgs/Mikos_logo.jpeg" class="logo-img">
  </div>

  <div class="center">
      <p>Vul hier je naam in:</p>
      <ion-item class="code-field">
          <ion-input placeholder="naam" type="text" (keyup)="nameInput()" [(ngModel)]="name"></ion-input>
      </ion-item>      
  </div>



</ion-content>

CSS:

page-login {

    .login {
        background-color: #EEEEEE;
    }

    .logo-container{
        position: absolute;
        width: 400px;
        left: calc(50% - 400px / 2);
      }

      .logo-img{
        display: block;
        width: 100%;
        height: auto;
      }

    .center{
        position: absolute;
        top: 40%;
        width: 300px;
        left: calc(50% - 300px / 2);
    }

    @media only screen and (max-width: 600px) {
    /* For mobile phones: */

        .logo-container{
            position: absolute;
            width: 300px;
            left: calc(50% - 300px / 2);
        }
    }

}

Что я пробовал:

Я добавил Ионическую встроенную клавиатуру и добавил это в свой модуль приложения:

IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),

К сожалению, это не сработало.

Обновление:

Добавление

.scroll-content {
    padding-bottom: 0 !important;
}

также не работает.

Answer 1

Просто добавьте это в ваш config.xml и убедитесь, что у вас установлен плагин для клавиатуры.

<preference name="KeyboardResizeMode" value="ionic" />

Answer 2

Это известная ошибка Ionic 3, которую можно исправить, добавив следующий стиль CSS:

.scroll-content {
    padding-bottom: 0 !important;
}

У меня были похожие проблемы, и этот фрагмент CSS исправил его.

Когда ввод сфокусирован, Ionic добавляет некоторые отступы в конец класса scroll-content, чтобы создать место для клавиатуры.

---

Обновление

Относительныйпозиционирование сверху может также вызвать проблему.