Prevent keyboard from resizing view on iOS/Android in Ionic 4 - ionic-framework

Question

I have a background image that I want to have full screen with an input section at the bottom. When the input is focused, the keyboard appears and shrinks the image to fit the screen. What I want is for the image to push the full div up without re-sizing it.
I've tried numerous things, but my current attempt is as follows:
.background{
url('assets/background.png') center center fixed;
height: 100%;
width: 100%;
}
.input-area{
position: absolute;
left: 10px;
bottom: 10px;
right: 10px;
}
<div class="background">
<div class="input-area">
//textboxes
</div>
</div>
This seems like it should be easy to accomplish, but can't get the desired outcome. Any input would be appreciated, thanks.
ionic cli 4.12.0
#ionic/angular 4.4.0
#ionic-native 5.5.1
node v10.15.2
npm 6.4.1
cordova 8.1.2 (cordova-lib#8.1.1)

Answer 1

this is how I managed to do it:
I added an id to my ion-content and ion-toolbar in html file to reference them in my typescript file
...
<ion-content #content >
...
<ion-toolbar #toolbar color="light">
<ion-input #input >...
...
in my typescript I referenced them with ViewChild and added the functionality in the constructor like this
...
#ViewChild('content', {read: ElementRef}) contentRef: ElementRef;
#ViewChild('toolbar', {read: ElementRef}) toolbarRef: ElementRef;
...
private startkeyboardAnimationTimestamp = 0;
private endkeyboardAnimationTimestamp = 0.3;
private keyboardAnimationDuration = 0.3;
...
constructor(private renderer: Renderer2) {
if (this.platform.is('capacitor')) {
window.addEventListener('keyboardWillShow', (e) => {
this.startkeyboardAnimationTimestamp = Date.now();
this.keyboardHeight = (<any>e).keyboardHeight;
this.renderer.setStyle(this.contentRef.nativeElement, 'transform', `translate3d(0, ${-this.keyboardHeight}px, 0)`);
this.renderer.setStyle(this.contentRef.nativeElement, 'transition', `${this.keyboardAnimationDuration}s ease-in-out`);
this.renderer.setStyle(this.toolbarRef.nativeElement, 'transform', `translate3d(0, ${-this.keyboardHeight}px, 0)`);
this.renderer.setStyle(this.toolbarRef.nativeElement, 'transition', `${this.keyboardAnimationDuration}s ease-in-out`);
window.addEventListener('keyboardDidShow', (e) => {
this.endkeyboardAnimationTimestamp = Date.now();
});
window.addEventListener('keyboardWillHide', () => {
this.renderer.setStyle(this.contentRef.nativeElement, 'transform',
`translate3d(0, 0px, 0)`);
this.renderer.setStyle(this.toolbarRef.nativeElement, 'transform',
`translate3d(0, 0px, 0)`);
});
...
** as for the keyboardAnimationDuration I have it default to 0.3s and update it after the first show and hide.

Answer 2

This worked for me:
in the AndroidManifest.xml
android:windowSoftInputMode="adjustResize"
In the scss:
ion-content{
--background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
padding: 0;
}