Keyboard makes header move to top [solved]

1

I’m building a simple login form and notice some weird behaviour on my iphone5s. When putting focus in the password field, the screen scrolls up and makes the header bar unusable. My guess is this isn’t expected behaviour.

You can see what I mean on the following screenshot:

CloudApp

This same screen can also be scrolled in a weird way like this:

CloudApp

Any tips to solve this? I’m using beta 5 of ionic, but started with beta 4 so one possible thing could be to manually install the keyboards plugin ? I only see the cordova.console en cordova.device plugins installed.

Thanks for helping out!

1 Like
2

Do you have the ionic keyboard plugin installed?

Also, try with the nightly builds

3

Sorry for the noob questions here, but is it enough to do “cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git” to install the keyboard plugin?

4

Yup, that’ll do it :smile:

1 Like
5

Ok I installed the keyboard plugin and re-installed the app. I’m having the exact same issue. Is the behaviour seen on the screenshots above to be expected or should that work differently?

By the way, I don’t notice any difference after installing the keyboard plugin, how can I make sure it’s installed correctly? What difference should I notice in the app?

Thanks for your help :slight_smile:

6

If the keyboard is installed correctly, you shouldn’t see any top controls1 for it. Just making sure, you have the nightly builds, right?

Do you mind making a codepen so I can load it on a device and check it out?

Also, check out the docs.

http://ionicframework.com/docs/api/page/keyboard/

Update: To prevent an scrolling, use cordova.plugins.Keyboard.disableScroll(true)

1 Like
7

When you say top controls, do you mean the bar with the arrows that allows you to move between input fields? That bar should be gone?

In my case, after installing the keyboard plugin, it’s still there.
I’m using "v1.0.0-beta.5b “cadmium-camel”, should I grab another version?

8

Try with the nightly builds and take a look at the config.xml features that you should be adding…

    <feature name="Keyboard">
        <param name="ios-package" value="IonicKeyboard" onload="true" />
    </feature>
9

Great, that was it! I didn’t add the permissions to my config.xml file.
Thanks for helping out, I know how frustrating these questions must be for you but for someone getting started with ionic+cordova this forum is invaluable!

10

No worries, it’s what I’m here for :smile:

You should check out our lean site,

http://learn.ionicframework.com

maybe suggest working with the keyboard as a new topic

11

hey,
i actually did the same and changed to the beta nightly 6 version and added the keyboard settings in the config.xml but my controls are still there. yesterday i changed from cordova 3.4.0 to 3.4.1 and did not start with the ionic starting project but i started with plain cordova project and copied ionic on top. can this be an issue? has cli ionic installation cordova 3.4.1 already included?

thanks in advance

12

@hillbm have you installed ionic keyboard plugin?

No ionic does not come with cordova as a dependency. You have to install cordova your self.

13

Yes i did. And also in the config file. But when i build the platform ios for example it adds the cordova and cordova plugin files to my www root so it does it right? Or do u mean before all that i need to have cordova installed? Which i obviously have because i updated to 3.4.1.

Many thanks

14

What config are you editing, the project root or the platform folder?

15

The project root config

16

where do i put “cordova.plugins.Keyboard.disableScroll(true)”? Sorry for the dumb question… all i can find of it in my project is in all the READMEs where it just tells me to do it…

thanks! :slight_smile:

17

Is it right this code into angularJs?

$ionicPlatform.ready(function() {
    console.log('Platform ready!');
    console.log("cordova:" + ionic.Platform.isCordova()); 
    console.log("paltform:" + ionic.Platform.platform()); 
    console.log("version:" + ionic.Platform.version()); 
    console.log("device :" + ionic.Platform.device()); 

    ionic.Platform.isFullScreen = true;

    if( window.StatusBar ) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    
    //cordova.plugins.Keyboard.disableScroll(true)
    Keyboard.disableScroll(true);
 
  });
1 Like
18

I have done all the steps.

Installed GitHub - ionic-team/ionic-plugin-keyboard: Ionic Keyboard Plugin for Cordova
Added cordova.plugins.Keyboard.disableScroll(true) in $ionicPlatform.ready
Added

<feature name="Keyboard">
    <param name="ios-package" value="IonicKeyboard" onload="true" />
</feature>

Runtime Information

Cordova CLI: 5.2.0
Gulp version: CLI version 3.8.11
Gulp local: Local version 3.9.0
Ionic Version: 1.0.1
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: 1.5.0
ios-sim version: 3.1.1
OS: Mac OS X Yosemite
Node Version: v0.12.6
Xcode version: Xcode 6.4 Build version 6E35b

My HTML Code looks like

<ion-view >
   <ion-header-bar>
      ...
   </ion-header-bar>
   <ion-content>
      ...
   </ion-content>
   <ion-footer-bar class="bar-stable item-input-inset"  keyboard-attach>
      <label class="item-input-wrapper">
      <input />
      </label>
      <button>
      </button>
   </ion-footer-bar>
</ion-view>

Even now my header is scrolling up over notification bar…

Can you help me please.

2 Likes