CODEWITHSUNDEEP
ionic-frameworkionic4
Nerrickk
Nerrickk

Reputation: 61

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

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 ([email protected])

enter image description here

Upvotes: 4

Views: 3115

Answers (2)

MadMac
MadMac

Reputation: 4871

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;
}

Upvotes: -1

Dan Petrescu
Dan Petrescu

Reputation: 59

this is how I managed to do it:

  1. 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 >...
...
  1. 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.

Upvotes: 0

Related Questions