Keyboard is pushing tabs and app's contents ionic in Android

rafamaffa · October 2, 2017, 5:34pm

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 breaking the layout and squeezing the content.

Normal screen:

Keyboard mode on:

I had already tried:

app.module.ts scrollAssist: false,

autoFocusAssist: false,

and also: this.keyboard.disableScroll(true);

and: this.keyboard.disableScroll(false);

IOS works just the way I want it.

The problem only happens on this screen that has the TABS. On other screens it works exactly the way I need it, it opens the keyboard without pushing anything.

I have already looked at almost every forum topic and none succeeded, I am 6 days researching the answer before coming to ask in the forum.

I’ve also tried putting min-height: 100% !important;

IONIC INFO:

cli packages:

@ionic/cli-utils : 1.10.1
ionic (Ionic CLI) : 3.10.1

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 1.3.7
Cordova Platforms : android 6.2.1 browser 4.1.0 ios 4.3.1
Ionic Framework : ionic-angular 3.5.3

System:

ios-sim : 5.1.0
Node : v6.11.0
npm : 3.10.10
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b

MY HTML:

https://pastebin.com/q19ibLfz

pedotdot · October 3, 2017, 10:21am

im having a same problem on android. My temporary solution for this is make the app run in fullscreen mode.
Add this config to your config.xml

<preference name="Fullscreen" value="true" />

rafamaffa · October 5, 2017, 7:17pm

@pedotdot It worked !!! Thank you !! But now it looks like in HEADER a notification bar on the phone is over, I tried using “this.statusBar.hide ();” but it did not work.

pedotdot · October 6, 2017, 2:35am

I do like this in my app

 this.statusBar.hide();
  this.statusBar.overlaysWebView(false);

Tanzeel064 · March 15, 2018, 8:01am

is it worked for you
???

pedotdot · March 15, 2018, 8:13am

yes.but im forcing my app to run in a fullscreen mode

Tanzeel064 · March 15, 2018, 8:17am

i am facing the same issue but when i go to full screen mode it hides my bottom.

Tanzeel064 · March 15, 2018, 8:19am

i fond the solution by padding up bottom and just go into full screen mode.

7wins · September 21, 2018, 2:53am

where you place this code? thx

pedotdot · September 21, 2018, 3:10am

in app.component.ts file have a initializeApp() function .
u can initialize your statusbar and keyboard there

7wins · September 21, 2018, 3:18am

okay i will try, thanks a lot. Btw, do you have telegram or whatsapp?

7wins · September 25, 2018, 6:46am

Can you share the solution please? i am facing the same issue but when i go to full screen mode it hides my bottom

7wins · September 26, 2018, 4:40am

Do you have any solution except
this.statusBar.hide();
this.statusBar.overlaysWebView(false);

because when i go to full screen mode it hides my bottom, thx a lot