简体   繁体   中英

Ionic ion-content not scrolling down when keyboard shows (Android)

I have a simple view with a login form. On Android, if the keyboard is opened, the content is not scrolling up to prevent it from getting behind the keyboard.

I followed the Keyboard instructions from the docs, and read a lot of forum posts, but I haven't figured it out.

I installed the Keyboard plugin com.ionic.keyboard .

This is the structure of the page:

<ion-nav-view>
  <ion-view>
    <ion-content>
       ...<form>..Login form..</form>...
    </ion-content>
  </ion-view>
</ion-nav-view>

If I put some extra dummy content in the page, it shows that ion-content is indeed scrollable. However, it's not moving up when the keyboard is opened by focusing on an input.

  • Ionic version? 1.0.0-beta.13
  • Is my app fullscreen? No
  • Did I test if the keyboard plugin is working? Yes

Is there anything else I have to do?

In the section where you declare the keyboard plugin, try to add this:

  if (window.cordova && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    cordova.plugins.Keyboard.disableScroll(false);

  }

I have prevent this scrolling property in my project by setting below values in AndroidManifest.xml file.

android:windowSoftInputMode = "adjustNothing"

Please check whether android:windowSoftInputMode value is adjustResize or not in AndroidManifest.xml . If not please update it to adjustResize .

I hope this will you. Thanks

On both Android and iOS, Ionic will attempt to prevent the keyboard from obscuring inputs and focusable elements when it appears by scrolling them into view. In order for this to work, any focusable elements must be within a Scroll View or a directive such as Content that has a Scroll View.

description from documentation here

In my case there is a footer that hides the input when the keyboard is showing.

Seeing github.com/driftyco/ionic/issues/2151 , although its a closed bug it seems that its still an issue.

To me it seems that the scrolling doesn't know how to calculate properly whether it should scroll or not, because it doesn't take under account the footer in its calculations. If the content is big enough from the first place then it knows it has to scroll anyway.

I've ended up using

$timeout(function() {
    $ionicScrollDelegate.scrollBottom(true);
}, 300);

and adding some <br/> at the bottom of my ion-content . There is enough space so it won't effect anything for me, bug will cause the scroll to work properly.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM