My tests are done on a Moto G2 with no hardware buttons on Android 6.0 using v2beta8.
I’m playing around with an input list which fills the entire Android device screen:
<ion-navbar *navbar>
<ion-title>Keyboard test</ion-title>
</ion-navbar>
<ion-content>
<ion-list>
<ion-item>
<ion-label floating>Name 1</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Name 2</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Name 3</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Name 4</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Name 5</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Name 6</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Name 7</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Name 8</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>eMail Address</ion-label>
<ion-input type="email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Country</ion-label>
<ion-select [(ngModel)]="country" interface="action-sheet">
<ion-option value="de">Germany</ion-option>
<ion-option value="fr">France</ion-option>
<ion-option value="us">USA</ion-option>
</ion-select>
</ion-item>
</ion-list>
<!-- should align to the bottom of the page -->
<div padding>
I agree to the Terms of Use and the Privacy Policy
</div>
</ion-content>
All is a page of a bottom tabbed navigation.
What I wanted:
- App Fullscreen mode
- Keyboard / status bar shows upon input, auto hides when input is done.
Problems:
- When I click on one of the input fields near to the bottom, the input field gets hidden by the virtual keyboard.
- Android status- and navbar (home/back button) remain visible after the keyboard is gone.
What I tried:
-
Using fullscreen mode seems to be an bad idea yet. When the keyboard hides, the Android status- and navbar remain active. navbar is no problem, but the status bar covers half of the ionic-navbar.
So I set fullscreen mode to false in config.xml preferences. -
Setting fullscreen mode to false has another quirk (or feature): The bottom tabbar scrolls up and is not hidden by the keyboard.
-
Setting
scrollAssist: truein config options.
This makes things a little better, but has certain side effects on my Android 6.0 device. When the keyboard shows up, input field is scrolled to the visible viewport. Good!
But scrolling the list now has bad visual effects. Input text gets rendered twice, lags when scrolling.
I guess this is an experimental option by now, nice, but not usable yet. -
Installed the ionic-keyboard-plugin
Found some topics to hook the keyboard show and hide event listeners and adjust the viewport height accordingly.
Really? This should come out of the box…
So want is actually the recommendation for using the keyboard and avoiding the problems above?
Or is this still a problem in beta8?