I have a super-simple test app that consists solely of a list of inputs (see HTML excerpt below). When I fire up the ionic view app on iOS and try to fill in the values, the on-screen keyboard pops up and the list behaves erratically, scrolling or rather jumping around in a non-consistent way, including the navigation header. It’s just an awful user experience.
To eliminate this I’ve spent a whole day experimenting with ionic-plugins-keyboard. I have the following code in my starter.js:
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
The disableScroll() - thing seems to improve the behavior on the iOS emulator. Also it’s good to hide the accessory bar to gain some screen estate. But if I view the same project on the ionic view app, both calls don’t seem to work. Meaning the scrolling behavior is erratic and the accessory bar is visible. So is this a structural problem in my code or my project? Have I not uploaded it correctly to ionic view? Or is ionic view broken? Is there anything else I can try?
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item">
<input type="number" min="0" placeholder="some input I">
</ion-item>
<ion-item class="item">
<input type="number" min="0" placeholder="some input II">
</ion-item>
<ion-item class="item">
<input type="number" min="0" placeholder="some input III">
</ion-item>
<ion-item class="item">
<input type="number" min="0" placeholder="some input IV">
</ion-item>
<ion-item class="item">
<input type="number" min="0" placeholder="some input V">
</ion-item>
<ion-item class="item">
<input type="number" min="0" placeholder="some input VI">
</ion-item>
<ion-item class="item">
<input type="number" min="0" placeholder="some input VII">
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>