CODEWITHSUNDEEP
ionic-framework
Manuel RODRIGUEZ
Manuel RODRIGUEZ

Reputation: 2161

Ionic Form is not sliding up when keyboard overlaps input

I developed the following login page in Ionic: 

<form name="login_form" class="form-container" novalidate>

  <div class="byf-logo">
    <img src="img/logo-text-clear-transparent.png" />
  </div>

  <div class="list list-inset byf-login-form">
    <label class="item item-input">
      <img src="img/icons/person.png" alt="">
      <input type="email" placeholder="Email" ng-model="user.email" required>
    </label>
    <label class="item item-input">
      <img src="img/icons/locker.png" alt="">
      <input type="password" placeholder="Password" ng-model="user.password" required>
    </label>
    <button class="button button-block button-assertive" ng-click="login(user)" ng-disabled="login_form.$invalid">CONNEXION</button>
  </div>



</form>

<div ng-show="error">
  <p class="message error"><i>{{error}}</i></p>
</div>

I expect the form to be sliding up a little when the password input (second input) is in focus because keyboard overlaps it: enter image description here

It works perfectly in another page without writing any particular code so I guess it is default behavior.

Any idea why it doesn't slide here ?

Upvotes: 1

Views: 924

Answers (1)

Michael Coyne
Michael Coyne

Reputation: 184

I had this same problem and the only way i could get it to work was as follows

this.keyboard.onKeyboardShow().subscribe(e => {

console.log('Keyboard height is: ' + e.keyboardHeight);

jQuery('body').animate({ 'marginTop': - e.keyboardHeight + 'px' }, 200);

});

this.keyboard.onKeyboardHide().subscribe(e => {

jQuery('body').animate({ 'marginTop': 0 + 'px' }, 200);

});

Upvotes: 1

Related Questions