Is mandatory install the Ionic Keyboard plugin

ionic-v1
1

I have a issue with the keyboard and the app content, in this forum the recommendation from @mhartington in almost all the post is install the keyboard plugin, then try to solve another issue if exist.

So my question, is really mandatory install this plugin to solve any issue with the keyboard?

Thanks in advance

2

Indeed it is.

In ionic, we have a js file that listens for the keyboard

https://github.com/driftyco/ionic/blob/master/js/utils/keyboard.js

This handles most of the issues that people have when dealing with the keyboard. The only other issue that comes up is when people need to disable webview scrolling.

cordova.plugins.Keyboard.disableScroll(false);

3

Thanks for reply, i go to apply this to my app.

My issue is really this (i think so :smile:) disable the web view scrolling, right now when tap on the first input all is show well, but when go to the next input show a white rectangle that only disappear if i tap the input again.

Firts image show all well

The second image appear the white rectangle and the content push up.

4

This can be resolve by disabling native scrolling.

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

This help so much but still happening pushing up content and when hidden the keyboard, appear and disappear a white area in the space of this.

I can capture the event on the go button of the keyboard?

Thanks

6

Hmm, I’m starting to think that it could be the background image getting messed up when the keyboard opens/closes.

Where do you declare the background image?

7

on the css

this is the code

.bg-signin-signup {
   background: url("../images/bgBlur.png") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

}

8

What has that class, ion-view, ion-content

9

Sorry is on

<ion-content class="bg-signin-signup"><!-- CONTAINER -->
10

Alright, that could be why. Try putting the background image on the ion-view, like this .

1 Like
11

thats all, works pretty good

Thanks a lot

1 Like
12

Hi, getting back on topic. I’m using the Intel XDK and until they support 3rd party Cordova plugins I can’t build with the Ionic keyboard plugin. They say the next version will be released this month with support but until then my Android app is pretty much unusable on a Nexus 7 because the keyboard pops up then goes away. Any work around without the plugin?

Also I’m starting to question what XDK gives me. Is it very hard setting up the Cordova/Ionic CLI build environment to generate iOS/Android apps and can you do it all on a PC?

13

HI @ferryfax, i don’t know to much about the Intel XDK so @mhartington maybe can help you, or another user on this great forum.

About the setting up the enviroment is really easy:

  1. Install node
  2. Install cordova with npm
  3. Install Ionic with npm

Here http://ionicframework.com/getting-started/ you can fin all the information.

I need to tell you that the only OS that support iOS build are Mac OS, and the same for Windows Phone that is supported only on Windows 8, so i use Mac for iOS, Android and BB apps, and do the magic with a virtual machine for windows phone.

14

Unfortunately, there really isn’t. Ionic listens for events that are fired when the keyboard opens/closes, so we need the keyboard plugin for there.

Depending on what your building for, I’d say take a chance and set up some development on your own machine. If your on a mac, things are incredibly easy for you to set up. The ionic cli make is incredibly easy to start a simple project with the necessary files and plugins. As far as setting out and building actual app file, you can alway use other build services such as phonegap build.

15

what is the reason for cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); ? I’m not sure why I should hide it ? Is it a best practice ?

I’m new that’s why I am asking :smile:

16

So the reasoning be hind this is because native apps seldom have an accessary bar. It’s a dead give away that an app is built with web tech and isn’t native.