Ios keyboard push content out of view


#1

Hi,
i have made an sign up form in ionic, when i use it in android it works perfect ! i can scroll even on input BUT when i do this in iOS the view is pushed up i changed my settings and added the keyboard solution of the docs but nothing is working. does anybody knows why my content is pushed up ? sample of my code

<ion-content class="centerDivFlex" padding="true" scroll="true">
    <div class="row">
        <form name="signup_form" class="col" ng-controller="signupController">
            <div class="list">
                <label class="item item-input"
                       ng-class="{redglow:signup_form.submitted && signup_form.username.$error.required}">
                    <span class="input-label">Username</span>
                    <input type="text" ng-model="user.username" name="username" required>
                </label>
                <label class="item item-input"
                       ng-class="{redglow:signup_form.submitted && signup_form.password.$error.required}">
                    <span class="input-label">Password</span>
                    <input type="password" ng-model="user.password" name="password" required>
                </label>
                <label class="item item-input"
                       ng-class="{redglow:signup_form.submitted && signup_form.firstname.$error.required}">
                    <span class="input-label">First Name</span>
                    <input type="text" class="form-control" ng-model="user.firstname" name="firstname" required>
                </label>
                <label class="item item-input"
                       ng-class="{redglow:signup_form.submitted && signup_form.lastname.$error.required}">
                    <span class="input-label">Last Name</span>
                    <input type="text" ng-model="user.lastname" name="lastname" required>
                </label>
                <label class="item item-input"
                       ng-class="{redglow:signup_form.submitted && signup_form.email.$error.required}">
                    <span class="input-label">E-mail</span>
                    <input type="email" ng-model="user.email" name="email" required>
                </label>

                <div ng-if="signup_form.submitted && signup_form.email.$error.email" class="error">
                    <i class="icon ion-ios7-information"></i> Please fill in a valid emailaddress
                </div>
                <label class="item">
                    <button class="button button-block button-positive" ng-click="submit()">SignUp</button>
                </label>
            </div>
        </form>
    </div>
</ion-content>

#2

In your .run() function, disable 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.styleLightContent();
    }
  });
})

#4

hi, i already tested that and i have that code in my app.js, but it didn’t work! Also when i click on my input field and scroll he always focus back to the input field how to disable that ?


#5

Tnx for all the info i have fixed it with some Css styling !


#6

@VincentBouillar I have exactly the same problem, but I haven’t figured it out yet. What was the css styling solution that you found? Can you help me?


#7

Have you disabled webview scrolling this?

cordova.plugins.Keyboard.disableScroll(true); 

#8

@rcnm

I used a flexbox to center the content in the middle of the screen but i used the wrong css flexbox code to do this for iOS and when i used the right codes everything worked. Is your app set in full screen ? don’t forget to set ionic.Platform.isFullScreen = true;


#9

@mhartington Yes, I’ve already tried that, but it didn’t work.

@VincentBouillar No, I haven’t set it to full screen.

I don’t understand why, but the problem is only happening in two of the views. When I click on the input area to write something, the screen moves to the left.

I’ve uploaded two pictures: the first one shows the screen before the input area is clicked, and the second one shows the screen after it’s clicked (screen moved to the left).

I would appreciate your help.


#10

I’ve finally figured it out. It was a problem in the nav bar.
After reconstructing the view, I could see that. Just made some changes in the nav bar, and no more problems.


#11

What changes did you make? I added the preference which fixed the accessory bar showing but it’s still pushing my navbar out of view, and if I disable the native scroll my input which is in the footer gets hidden under the keyboard when it should be pushed just above it like how to input is in google hangouts.


#12

In my case, instead of using the ion-nav-bar tag, I was using ion-header-bar in some of the views. The only change I’ve made was creating a new template for the nav bar, using it as an abstract view and replacing it for the views which needed the previous ion-header-bar.

This solved for me.

Are you using the proper tag ion-nav-bar? Also… Is there an image displayed in your nav bar?


#13

I found this the other day http://ionicframework.com/docs/api/directive/keyboardAttach/ I haven’t had a chance to try it yet but I’m pretty sure it will work.