Html Android: клавиатура портит мой макет при фокусировке ввода

Question

Я уже некоторое время пытаюсь понять это, и у меня заканчиваются идеи. У меня была проблема, когда пользователь нажимал на вход, а клавиатура устройства android перекрывала вход. Я решил эту проблему, изменив положение контейнера с фиксированного на абсолютное. Теперь, когда пользователь нажимает на него, ввод корректно перемещается вверх, но появляется поле справа ( см. Скриншот ) и портит макет. Я попытался установить фиксированное значение для контейнера и поиграть с позиционированием, но ничего не получалось. Я не совсем понимаю, что происходит, когда клавиатура открывается, поэтому я хотел бы оценить любое прошлое.

Я приложил код, относящийся к рассматриваемому вводу, так как я не уверен, какой код создает эту проблему. Проект находится в Vue, и я также использую Vue - Bootstrap. Я был бы рад предоставить больше информации, если это необходимо.

Спасибо!

См. Снимок экрана

<b-collapse
  id="search-collapse"
  ref="search-collapse"
  :visible="isMenuExpanded"
  class="z-10 bg-white text-lg position-absolute"
>
  <search-inputs-section
    class="border-top"
    :initial-position="$parent.initialPosition"
    :is-location-invalid="$parent.isLocationInvalid"
    :date-in="$parent.filters.dateIn"
    :date-out="$parent.filters.dateOut"
    @onSearchReturnDateSelected="
      dateIn => $parent.changeFilters('dateIn', dateIn)
    "
    @onSearchPickupDateSelected="
      dateOut => $parent.changeFilters('dateOut', dateOut)
    "
    @onPositionSelected="
      position => $parent.changeFilters('pickUpPosition', position)
    "
  />
  <input-age
    class="px-4 py-2 text-lg"
    :validate="$parent.validate"
    @onDriverAgeSelected="$parent.onAgeChecked"
    @onDriverAgeUpdated="$parent.onAgeUpdated"
    @onAgeChanged="$parent.ageValidated"
  />
  <!-- Action button -->
  <div
    class="py-4 w-100 text-center border-top font-weight-semi-bold text-uppercase"
  >
    <a
      v-if="$parent.isUpdatable"
      class="text-info  mx-auto"
      @click="onUpdateResults"
      >{{ "results.update" | i18n }}</a
    >
    <a v-else class="text-primary mx-auto" @click="toggleMenu">
      {{ "common.close" | i18n }}
    </a>
  </div>
</b-collapse>