Ionic input is obscured by navigation bar

ionic-v1
1

I have a long input list in one page. when I move to next input through KeyboardAccessoryBar, the input which get the focus can be obscured by navigation bar somtimes.

a long input list:
image

press the first input to make the keyboard show, then keep press the ‘next’ button of the KeyboardAccessoryBar. When the page need to scroll, issue occur:

everything is OK till now, but go on to press ‘next’…

image
E758FE36-07DF-437D-AA9A-5A13925341B9副本.png640×1180 62.7 KB

the input got focus is obscured by navigation bar. (cursor is in the black circle)
image
1E24EB39-F035-4825-9EE4-24EEC09ACAC3.png640×1180 65.6 KB

Any one who knows how to solve this issue? Thanks very much.

2

Anyone can provide some suggestions?

3

Usually the navbar should move up as well instead of staying fixed. Can you show your html for this template? Also do you use ionic keyboard and do you set your app into fullScreen mode?

4

The code is simple. I do have ionic keyboard plugin. fullScreen mode is default, I never change the value. The issue doesn’t occur if I remove ionic keyboard plugin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  <link href="css/ionic.app.css" rel="stylesheet">
  -->

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
  <ion-nav-back-button class="button-clear" hide-on-keyboard-open>
  </ion-nav-back-button>
</ion-nav-bar>
<ion-view>
  <ion-pane>
    <ion-content>
      <form>

        <label class="item item-input">
          <span class="input-label">1</span>
          <input type="text" placeholder="test">
        </label>

        <label class="item item-input">
          <span class="input-label">2</span>
          <input type="number" placeholder="test">
        </label>

        <label class="item item-input">
          <span class="input-label">3</span>
          <input type="text" placeholder="test">
        </label>

        <label class="item item-input">
          <span class="input-label">4</span>
          <input type="number" placeholder="test">
        </label>
        <label class="item item-input">
          <span class="input-label">5</span>
          <input type="number" placeholder="test">
        </label>

        <label class="item item-input">
          <span class="input-label">6</span>
          <input type="text" placeholder="test" >
        </label>
        <label class="item item-input">
          <span class="input-label">7</span>
          <input type="text" placeholder="test">
        </label><label class="item item-input">
        <span class="input-label">8</span>
        <input type="text" placeholder="test" >
      </label><label class="item item-input">
        <span class="input-label">9</span>
        <input type="text" placeholder="test" >
      </label><label class="item item-input">
        <span class="input-label">10</span>
        <input type="text" placeholder="test">
      </label><label class="item item-input">
        <span class="input-label">11</span>
        <input type="text" placeholder="test" >
      </label><label class="item item-input">
        <span class="input-label">12</span>
        <input type="text" placeholder="test">
      </label>
      </form>
    </ion-content>
  </ion-pane>
</ion-view>

</body>
</html>
5

can you try adding scroll=“true” to ion-content

6

It can not help. :frowning: