Hello everyone,
I’m currently migrating my ionic 1 app to ionic 2 and already have some troubles on the first page i.e. login page.
Our login page is using a flex div to distribute the element over the height of the device screen. Here is a screenshot with border around each block (ion-row then a form then another ion-row
my app_component.ts file (initialization of the app) contains the following constructor to setup the keyboard plugin, as I used to in ionic 1
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
//StatusBar.styleDefault();
StatusBar.styleBlackTranslucent();
Splashscreen.hide();
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
Keyboard.hideKeyboardAccessoryBar(false);
// 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.
Keyboard.disableScroll(true);
});
Problems occur when trying to fill in the required input.
On the 1st click inside an input, the keyboard is shown but no padding at all is added to the scroll-content, as you can see in the following screenshots
the problem is that if the user clicks on the password input first, the keyboard overlaps the input (same problem occurs when the user tap next on the keyboard after he has filled in the nickname field).
Second problem occurs if the user exits the input field (closing the keyboard) and re-enter an input field. in this case, a huge padding is added to the bottom of scroll-content area. I believe this padding is added to compensate for the soft keyboard height but it is around two times larger than the keyboard height which leads to weird scrolling behavior and reshaping of the flex components.
This has been posted multiple times, with some kind of solutions for the different beta version of ionic 2 but I can’t find anything working for the current RC1.
The expected behaviour should be, I guess, 1) to add a padding of the height of the keyboard + what is required for the input field to be “near” the keyboard, if required, 2) consistency between different opening of the keyboard.
Is it required to specify options for the keyboard in every page that is using the keyboard (I tried without success for now) or the app_component level options should be sufficient?
Any help would be greatly appreciated! Thanks
EDIT: let me add that this has been tested on simulator and real devices (iPad 2, iPhone 5 & iPhone 6) with the same observed result!
