Ionic: Keyboard overlaps a focused text input on iOS 11

Question

Issue

When I click the text input from the modal, a keyboard overlaps the text input. This issue has found during testing on iPhone SE (iOS 11) device.

I've looked up a several threads and tried to figure out on my own, but I've realized that my current problem has been a chronic issue for Ionic developers until now.

These are the related links to my issue. I've tried given solutions from links below, but none of them worked with my code.

• Keyboard issue
• Keyboard overlaps the text input when the input is placed inside an ion-footer
• Keyboard hides input until I start typing
• Ionic 2 On-Screen Keyboard Covers Focused Input Element Inside Grid Component

Version Info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v8.9.0
npm        : 5.5.1
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Expected behavior

Ion input should stay in a position right above the keyboard while a user types some messages.

Actual behavior

app.component.ts

I've included keyboard.disableScroll(true); inside platform.ready() to prevent navbar crashing issue. Without this line of code, the keyboard works fine with the input text. But it pushes the whole content to the top including navbar, thus for the first few messages appear to be hidden.

Any ideas?

UPDATED

I'm not sure the way I've solved the issue is the best solution, but for now, I replaced the content and footer's margin-bottom with a sum of an initial height of text area and the keyboard height.

If you have a better solution, feel free to leave it as an answer.

Here's the final result.

Answer 1

I was having similar problems in a similar project setup where the keyboard in iOS overlapped the footer bar in ionic. I was able to solve it by removing the ionic-plugin-keyboard@2.2.1 and adding cordova-plugin-ionic-keyboard@2.0.5 https://github.com/ionic-team/cordova-plugin-ionic-keyboard

Apparently I didn't notice that ionic-plugin-keyboard was deprecated as I was upgrading my project from Ionic 1 to 2, I'm guessing you may have been in a similar position.

Answer 2

To make things happen, first, you need to get the height of three elements like the example code below. For example,

@ViewChild(Content) content: Content;

ionViewDidLoad() {
  if (this.platform.is('ios'))
    this.addKeyboardListeners();

  this.scrollContentElement = this.content.getScrollElement();
  this.footerElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('ion-footer')[0];
  this.inputElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('textarea')[0];
}

Then, add a keyboard listener for ios platform.

addKeyboardListeners() {
  this.keyboardHideSub = this.keyboard.onKeyboardHide().subscribe(() => {
    let marginBottom = this.textareaHeight - this.initialTextAreaHeight + 44;
    this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom + 'px');
    this.renderer.setElementStyle(this.footerElement, 'marginBottom', '0px')
  });

  this.keybaordShowSub = this.keyboard.onKeyboardShow().subscribe((e) => {
    let newHeight = (e['keyboardHeight']) + this.textareaHeight - this.initialTextAreaHeight;
    let marginBottom = newHeight + 44 + 'px';
    this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom);
    this.renderer.setElementStyle(this.footerElement, 'marginBottom', e['keyboardHeight'] + 'px');
    this.updateScroll(250);
  });
}

Lastly, it is important to unsubscribe the keyboard listeners whenever you leave the page. Make it as a method and call it from wherever you need to.

removeKeyboardListeners() {
  this.keyboardHideSub.unsubscribe();
  this.keybaordShowSub.unsubscribe();
}

Answer 3

The solution of @coderroggie saved my life!

Just uninstall ionic-plugin-keyboard and then install c ordova-plugin-ionic-keyboard and it will work.

In my case I had two windows: - Chat List with ion-footer with input: when the input has focus the keyboard pushed all content up (including navbar).

• Search with top searchbar and autocomplete List: when searchbar has focus the keyboard overlap the list.

Thank you @coderroggie.

Answer 4

It looks that this is framework related issue. I was also facing the same in android. To fix this i have used keyboard plugin and it's functions to handle height of viewport. Below is the code-

constructor(
    private platform: Platform,
    private keyboard: Keyboard
  ) {
    if(this.platform.is('android')){
      this.keyboard.onKeyboardShow().subscribe((e) => {
        var keyboardHeight = e.keyboardHeight;
        if ($("html").hasClass("plt-android")) {
          keyboardHeight = keyboardHeight ? keyboardHeight : '337';
          ****337 is default height to handle if keyboard height not available****
              $('body').css('height', 'calc(100vh - ' + keyboardHeight + 'px)' );
            }
          });

          this.keyboard.onKeyboardHide().subscribe(e => {
            $('input, textarea').blur();
            if ($("html").hasClass("plt-android")) {
                $("body").css("height", "100vh");
            }
          });
    }
}

library--

npm install jquery
npm install @types/jquery
ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install @ionic-native/keyboard

imports--

import { Platform } from '@ionic/angular';
import * as $ from "jquery";
import { Keyboard } from '@ionic-native/keyboard/ngx';

Answer 5

I've changed

<ion-input type="tel" pattern="tel" autocomplete="tel (ionChange)="writeValue($event.target.value)"></ion-input>

to

<input type="tel" (change)="writeValue($event.target.value)" autocomplete="tel">

And added some styles

 input {
    width: 100%;
    background-color: transparent;
    border: none;
    font-size: 17px;
    font-weight: 400;
  }
  input:focus {
    outline: none;
  }

Answer 6

Finally, we got the perfect solution.

window.scrollBy(0, 100); // Scroll 100px downwards
window.scrollBy(100, 0); // Scroll 100px to the right