Keyboard Is Pushing Tabs In Ionic Android

I’m developing an app on IONIC 3 and i’m having a problem. When I click on the ion search and the Keyboard opens in ANDROID it simply pushes the entire contents of the App by b

Solution 1:

You can handle the UIScrollView from moving Up when input is focussed using disableScroll method.

https://ionicframework.com/docs/native/keyboard/

Solution 2:

Try to add this line in activitytag in Manifest file android:windowSoftInputMode="adjustPan

Like This

<activity...android:windowSoftInputMode="adjustPan"></activity>

Solution 3:

Try adding this css in app.scss file. I too had the same problem and I came up with this answer and this one solved me. Hope this will helpful to you.

.scroll-content{
  padding-bottom: 0px!important;
  margin-top: 0px;
}

Solution 4:

Install Ionic Native Keyboard plugin and try below code

import { Keyboard } from "@ionic-native/keyboard";

  this.keyboard.onKeyboardShow().subscribe((res) => {
    this.tabBarElement = document.querySelector('.tabbar');
    if (this.tabBarElement != null ) {
      this.tabBarElement.style.display = 'none';
    }
});

this.keyboard.onKeyboardHide().subscribe((res) => {
  if (this.tabBarElement != null) {
    this.tabBarElement.style.display = '-webkit-box';
  }
});

Hope you may help this! Happy Coding!!

Solution 5:

Try this following code:

window.addEventListener('keyboardDidShow', () => {
  console.log("Keyboard is open")
  let elements = document.querySelectorAll(".tabbar");

  if (elements != null) {
    Object.keys(elements).map((key) => {
      elements[key].style.display = 'none';
    });
  }
});

window.addEventListener('keyboardWillHide', () => {
  let elements = document.querySelectorAll(".tabbar");

  if (elements != null) {
    Object.keys(elements).map((key) => {
      elements[key].style.display = 'flex';
    });
  }
});

Add this code in appcomponent.ts or particular tab where you are facing this issue.