Клавиатура выталкивает экран вверх и наружу

Я использую Ionic 3 для создания веб-сайта, который будет частью другого нативного приложения в веб-представлении, поэтому я не использую кордову или какие-либо нативные плагины. У меня есть форма со встроенным Google Map View над элементами, и вот мой HTML:

<div  style="height: 40%; width: 100%">
  <div id="map_loader" *ngIf="showMapLoader">
    <div class="sk-wave">
      <div class="sk-rect sk-rect1"></div>
      <div class="sk-rect sk-rect2"></div>
      <div class="sk-rect sk-rect3"></div>
      <div class="sk-rect sk-rect4"></div>
      <div class="sk-rect sk-rect5"></div>
    </div>
  </div>
  <div #mapCanvas style="width: 100%; height: 100%;"></div>
</div>
<form (ngSubmit)="submit()" padding>
  <ion-list>
......
......
.....
  </ion-list>
</form>

и вот мой CSS:

  #map_loader {
    margin:auto;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: absolute;
  }

  .scroll-content {
    top: 38%;
    position: absolute;
    margin-top: 32px;
  }

Теперь, как только пользователь откроет веб-сайт на своем телефоне и начнет заполнять форму, клавиатура смещает карту за пределы экрана (вверх), и она остается такой, и под формой отображается пустое пустое место.

Я делаю это правильно? Это происходит из-за моего CSS? и какой лучший способ сделать div занимает определенный процент от высоты экрана? Я старался ion-grid но, похоже, это не поможет мне в этом деле.

Источник

2 ответа

Решение

Это ошибка в ионном, как только вы сосредоточитесь на любом входе, клавиатура появится и добавит padding-bottom для scroll-content класс, чтобы поднять для выше клавиатуры, и это не удаляет padding-bottom после закрытия клавиатуры. Я пытался проверить, есть ли у меня какое-либо событие JS на мобильной клавиатуре, но мы этого не делаем, поэтому моя задача - установить фиксированное значение. padding-bottom для scroll-content класс, чтобы предотвратить изменение его во время выполнения.

.scroll-content {
    padding-bottom: 0 !important;
 }
Источник

Изменение в файле AndroidManifest.xml помогло мне. android:windowSoftInputMode="adjustPan"

Источник

Да, вы можете избежать этой проблемы с помощью ионной сетки. Вам нужно установить CSS как показано ниже.

ваш-page.scss

  ion-grid {
      min-height: 100%;
  }
Источник
Другие вопросы по тегам