CODEWITHSUNDEEP
javascriptioscssionic-framework
JeffMinsungKim
JeffMinsungKim

Reputation: 2140

Ionic: Keyboard overlaps a focused text input on iOS 11

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.

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

enter image description here

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.

enter image description here

Upvotes: 7

Views: 14313

Answers (6)

Sagar Paithankar
Sagar Paithankar

Reputation: 1

Finally, we got the perfect solution.

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

Upvotes: -2

Anastasiia Nedbailo
Anastasiia Nedbailo

Reputation: 1

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;
  }

Upvotes: 0

Kshitij
Kshitij

Reputation: 380

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';

Upvotes: 0

testerino
testerino

Reputation: 2202

The solution of @coderroggie saved my life!

Just uninstall ionic-plugin-keyboard and then install cordova-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.

Upvotes: 1

coderroggie
coderroggie

Reputation: 910

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 [email protected] and adding [email protected] 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.

Upvotes: 8

JeffMinsungKim
JeffMinsungKim

Reputation: 2140

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();
}

Upvotes: 2

Related Questions