@sereyvuthy I found a workaround which works pretty good (At least for me).
We’ve added an empty <ion-input>
before the ending tag of the <ion-component>
with a custom style which will be changed depending if the keyboard is open or not.
For this to work we had to implement the ionic-keyboard plugin (and dont forget to add it in your app.modules.ts)
Then we also had to add a function which is binded to the ionFocus function of your ionic-input elements.
Here’s a sample of my code where you can see the call of eventFocus on each ionFocus inside the ion-item and the style in the empty ion-item before the ion-content:
<ion-content padding>
...
...
<ion-item>
<ion-label position="floating">Teléfono</ion-label>
<ion-input required type="tel" [(ngModel)]="telefono" (ionFocus)="focusInput($event)"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Mail</ion-label>
<ion-input required type="email" [(ngModel)]="email" (ionFocus)="focusInput($event)"></ion-input>
</ion-item>
<ion-item [ngStyle]="keyboardStyle" >
</ion-item>
</ion-content>
On the page.ts we have the following code:
We define:
keyboardStyle = { width: '100%', height: '0px' };
Then on your constructor:
constructor(private httpClient: HTTP, public core: CoreService, private router: Router,
private popoverController: PopoverController, private keyboard: Keyboard) {
console.log('Entra al constructor.');
this.keyboard.onKeyboardWillShow().subscribe( {
next: x => {
this.keyboardStyle.height = x.keyboardHeight + 'px';
},
error: e => {
console.log(e);
}
});
this.keyboard.onKeyboardWillHide().subscribe( {
next: x => {
this.keyboardStyle.height = '0px';
},
error: e => {
console.log(e);
}
});
console.log('Sale del constructor');
}
This last function which is called each time the user makes focus on an input was created by another developer. Thank you a lot sjoerd216 (From Stack Overflow)
public focusInput (event): void {
let total = 0;
let container = null;
const _rec = (obj) => {
total += obj.offsetTop;
const par = obj.offsetParent;
if (par && par.localName !== 'ion-content') {
_rec(par);
} else {
container = par;
}
};
_rec(event.target);
setTimeout(() => {
container.scrollToPoint(0, total - 50, 400);
}, 500);
}
I hope it works for anyone else having this problem.