Keyboard issue with iOS

luaneswart · August 15, 2014, 2:58pm

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?

mhartington · August 15, 2014, 4:49pm

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

luaneswart · August 18, 2014, 7:15am

Hi @mhartington

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!

mhartington · August 18, 2014, 1:19pm

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

luaneswart · August 18, 2014, 1:55pm

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…

mhartington · August 18, 2014, 1:56pm

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

luaneswart · August 18, 2014, 2:49pm

I sent you an email - thanks

luaneswart · August 21, 2014, 12:57pm

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?

mhartington · August 21, 2014, 2:58pm

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

luaneswart · August 22, 2014, 9:49am

It works!! 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.

mhartington · August 22, 2014, 6:31pm

Are you still working with the same UI as originally?

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

luaneswart · August 25, 2014, 7:33am

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>

mhartington · August 25, 2014, 4:05pm

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>

luaneswart · August 26, 2014, 9:13am

Hi there!

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

mhartington · August 26, 2014, 1:17pm

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?

luaneswart · August 27, 2014, 1:57pm

Oh my goodness I have great news!!! 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 x

mhartington · August 27, 2014, 2:08pm

Glad to hear! Best of luck

muhammad_asif · January 2, 2016, 7:30am

@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

sumitionic · November 24, 2016, 9:24am

<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:

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

Have Fun

Topic		Replies	Views
White space above keyboard or select box control(pic inside) ionic-v1	19	13286	July 19, 2021
Help! ionic cordava keyboard issue ionic-v1	3	1884	September 1, 2015
Ionic Chat screen keyboard issues ionic-v3	3	1595	August 6, 2017
Iphone keyboard popup issue on phonegap apps? ionic-v1	3	1563	July 1, 2014
Keyboard-attach with Ionic View iOS app ionic-v1	4	1298	April 2, 2015

Keyboard issue with iOS

Related topics