Keyboard issue with iOS


#1

We created an app using Ionic Framework, AngularJS, Phonegap Build 3.4

We are having some keyboard issues with iOS - on Android its fine:

ANDROID:

Picture 1: We open a message that we received - the reply bar is in the ion-footer-bar div

Picture 2: We tap on the write a message reply input box - this is correct:

iOS:

Picture: We tap on the write a message reply input box - this is NOT CORRECT! As you can see the whole screen shifted up and away when they keyboard is up. How can we fix this?


#2

Hey there, so you need to add the ionic keyboard plugin

Then in your .run function, disable the native overflow scroll

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      // Set the statusbar to use the default style, tweak this to
      // remove the status bar on iOS or change it to use white instead of dark colors.
      StatusBar.styleDefault();
    }
  });
})

#3

Hi @mhartington :smile:

We added the plugin and added the disableScroll part, but its still happening. I used the iPhone Configuration Utility on Mac to see if there was any errors in the phone’s console, but there was no errors.

Is it not because the input field is in the ion-footer-bar? What else can we do to fix this issue?

Thanks!


#4

Ah alright, yes that can cause it. Take a look at the keyboard-attach directive,

http://ionicframework.com/docs/api/directive/keyboardAttach/

This will stop the view from being pushed up and keep the footer with the keyboard


#5

We tried that now, but it made no difference. When we tap on the input field the whole view shifts up and away exactly like we showed in the iOS pic in the original post.

Sorry to be such a pain, but this is the only thing we have left to do before we can publish the app to the App Stores…


#6

Any chance you can share a link to the project? I could take a look at pretty quickly and see what the issue is. Want to send me an email?

mikehartington[at]drifty[dot]com


#7

I sent you an email - thanks :slight_smile:


#8

I found something interesting in the iPhone Utility console! (Not sure how I missed this before…

Here is my piece of code:

    console.log("KEYBOARD: Now load keyboard plugin...");
    console.log("KEYBOARD: Keyboard plugin: " + window.cordova.plugins.Keyboard);
    console.log("KEYBOARD: And cordova keyboard: " + cordova.plugins.Keyboard);

  if (window.cordova && window.cordova.plugins.Keyboard) {
      console.log("KEYBOARD:The keyboard plugin is here so use it");
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
  }

  console.log("KEYBOARD: Loaded keyboard plugin...");

And then I saw this in the iPhone log file:

GComTest[1674] <Warning>: KEYBOARD: Now load keyboard plugin...
GComTest[1674] <Warning>: KEYBOARD: Keyboard plugin: undefined
GComTest[1674] <Warning>: KEYBOARD: And cordova keyboard: undefined
GComTest[1674] <Warning>: KEYBOARD: Loaded keyboard plugin...

So as you can see the plugin never actually loaded! Why would that be?


#9

Hmm, very odd. Though I’ve seen situations where plugins that are installed aren’t copied over. This is an issue with cordova AFAIK.

A simple solution would be to go to your plugins/ and delete ios.json. After that, run ionic build ios and it should be good.

If not, try removing the plugin and re-adding.

$ ionic plugin rm com.ionic.keyboard
$ cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git

#10

It works!! :smiley: I removed the plugin like you said and then added it again.
So thank you very much!

But now I have another problem… When I tap the input field the keyboard comes up and the page view does not scroll up (yay!), but now the keyboard is over the input field so I cannot see what I am typing…

I do have ‘keyboard-attach’ as part of my ion-footer-bar.


#11

Are you still working with the same UI as originally?

Any way you can provide a screen capture or recording of this?


#12

Yes, same as before. Here is the newest screenshot - seems the keyboard-attach is not working now:

<ion-footer-bar keyboard-attach class="bar-clear">
    <div keyboard-attach class="bar bar-footer bar-stable item-input-inset footerbar" >
        <label class="item-input-wrapper footerlabel">
            <input type='text' id="replyText" style="border:0!important;" ng-model='replyText' value='{{replyText}}' placeholder="Write a message" ng-keyup="typingText(this.replyText)" />
        </label>
        <a ng-click='replyToMessage()' type="button"><img src="img/{{replyImage}}" class="sendbtn" /></a>
    </div>
</ion-footer-bar>


#13

Hmm, seems the markup if a bit off. Try this

<ion-footer-bar keyboard-attach class="bar-clear item-input-inset">
  <label class="item-input-wrapper footerlabel">
    <input type='text' id="replyText" style="border:0!important;" ng-model='replyText' value='{{replyText}}' placeholder="Write a message" ng-keyup="typingText(this.replyText)" />
  </label>
  <a ng-click='replyToMessage()' type="button">
    <img src="img/{{replyImage}}" class="sendbtn" />
    </a>
</ion-footer-bar>

#14

Hi there!

I copied your code exactly, but we get the same thing - the keyboard goes completely over the input field :frowning:


#15

Hmm, I’m not sure what the issue could be then. I used this project again as a test

And everything seems to work and the input wasn’t getting covered for me. Can you compare this project and your’s to see what the issue is?


#16

Oh my goodness I have great news!!! :smiley: We updated Ionic from version 5 to the latest 11 one and everything is sorted out it is perfect!!!

Thank you so much for all your help you can close the issue :slight_smile: x


#17

Glad to hear! Best of luck :smile:


#18

@mhartington
dear sir
i use your ionic chat app:

there is same issue as my “chat application”.actually problem have only ios devices when i tap the input field my footer push to above side & also footer scrolling see example on ionic ionic view.
ID:(b14e263e)
not: i use iphone 4s device.please give me solution :sleepy:


#19
<ion-footer-bar keyboard-attach class="bar-clear item-input-inset">
  <label class="item-input-wrapper footerlabel">
    <input type='text' id="replyText" style="border:0!important;" ng-model='replyText' value='{{replyText}}' placeholder="Write a message" ng-keyup="typingText(this.replyText)" />
  </label>
  <a ng-click='replyToMessage()' type="button">
    <img src="img/{{replyImage}}" class="sendbtn" />
    </a>
</ion-footer-bar>

Step:

  1. Install ionic keyboard plugin
  2. add cordova.plugins.Keyboard.disableScroll(true) to your controller

Have Fun :slight_smile: