Клавиатура Ionic 3 скрывает поле ввода в ландшафтном режиме

Question

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

Экран в ландшафтном режиме перед набором

Экран при наборе текста начинается

Экран нативных приложений при наборе

Answer 1

Я получил его на работу. Похоже, единственный способ исправить это - скрыть header и footer, когда клавиатура отображается, и показать header и footer, когда клавиатура скрывается. Мне также пришлось убрать немного margins, чтобы сфокусированный input оказался сверху. Вот мой код, который я добавил в app.component.ts:

keyboard.onKeyboardShow().subscribe(() => {

    let headers = document.querySelectorAll("ion-header"); //Get all headers
    headers[headers.length - 1].setAttribute("style", "display: none"); //Hide ACTIVE header

    let footers = document.querySelectorAll("ion-footer"); //Get all footers
    footers[footers.length - 1].setAttribute("style", "display: none"); //Hide ACTIVE footer

    let contents = document.querySelectorAll("ion-content"); //Get all content
    contents[contents.length - 1].querySelector("div.scroll-content").removeAttribute("style"); // Remove styling from content (margins)
  });

  keyboard.onKeyboardHide().subscribe(() => {
    let headers = document.querySelectorAll("ion-header"); //Get all headers
    headers[headers.length - 1].removeAttribute("style"); //Show ACTIVE header again

    let footers = document.querySelectorAll("ion-footer"); //Get all footers
    footers[footers.length - 1].removeAttribute("style"); //Show ACTIVE footer

    let contents = document.querySelectorAll("ion-content"); //Get all content
    contents[contents.length - 1].querySelector("div.scroll-content").setAttribute("style", "margin-top: 56px; margin-bottom: 56px;"); //Set styling again (margins)
  });

Answer 2

Попробуйте использовать scrollAssist: true для IonicModule.

IonicModule.forRoot(MyApp, {
  scrollAssist: true
}),