Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 228595

Inputs, scrolling and the onscreen keyboard on Android

$
0
0

Hello,

I have some issues while testing my very first Ionic app in an HTC running Android 4.0.3

I created 1 directive with a template that is similar to

<ion-pane>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Title</h1>
    </ion-header-bar>
    <ion-content>
        <label class="item item-input">
          <span class="input-label">Street</span>
          <input type="text" ng-model="input.street">
        </label>

        <!-- and a lot of similar inputs here -->

    </ion-content>
</ion-pane>

The first few items work, and get a blue line around them when clicked and the screen keyboard appears.

But when I touch one further down the screen scrolls up (moving the input out of the way of the on-screen keyoard) and the blue box is in the wrong place.
And when I scroll further down and I try to click one of those input fields for editing, it picks the wrong field, it scrolls to the wrong place and you don't know which field you are actually editing.

Very annoying of course (the app is pretty much unusable)

Does that sound familiar to anyone, and does anyone have a solution?

Oh yes, and I created the app using ionic cli, so it contains this as mentioned in the docs:

# IMPORTANT
app.run( ( $ionicPlatform ) ->
  $ionicPlatform.ready( () ->
    if ( window.cordova && window.cordova.plugins.Keyboard )
      # Hide the accessory bar by default (remove this to show the accessory bar
      # above the keyboard for form inputs)
      window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar( true )

      # Don't remove this line unless you know what you are doing. It stops the viewport
  # from snapping when text inputs are focused. Ionic handles this internally for
  # a much nicer keyboard experience.
  cordova.plugins.Keyboard.disableScroll( true ) # originally TRUE, but let's try what happens with FALSE

if ( window.StatusBar )
  window.StatusBar.styleDefault()
  )
)

Viewing all articles
Browse latest Browse all 228595

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>