How do I keep my Cordova app full-screen when opening the Android keyboard?

I've created a Cordova app and I'm testing it on a Nexus 4. I've used the basic steps listed in the Cordova CLI workflow to get up and running. I've also modified my config.xml with this:

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

My app runs full-screen as expected. As soon as I click on an input field the keyboard slides up as expected, BUT android's black top and bottom bars appear too, which remain even after the keyboard is closed.

To make matters worse, they actually hide portions of the app. At that point, the only way to get rid of them and return to full-screen is to quit the app and restart it. UPDATE: I've discovered that the user can remove them by swiping down and back up again on the status bar or tapping the recent apps button, but this is not obvious.

Is there a way that I can prevent the top and bottom bars appearing?

Ideally I'd like to avoid changing anything in the platforms/android directory, as I'm new to mobile development. Perhaps a there's a config option, hook, or even a plugin that I can just drop in that would solve this?

Answers


For me it started to reproduce after I updated to cli-5.2.0. I found 2 solutions so far:

  1. Switch back to cli-5.1.1
  2. Add cordova-plugin-fullscreen and put AndroidFullScreen.immersiveMode() in the DeviceReady event handler.

I preferred the second solution. I hope that the problem will be fixed in future cordova releases and I will be able to remove my workaround. I believe that the relevant ticket is this: https://issues.apache.org/jira/browse/CB-8902


Another option is to use the Cordova Reference Plugin API "StatusBar".

Cordova 6.3.1 cli-5.3.7

cordova plugin add cordova-plugin-statusbar

The following code will hide the status bar. I use the "if (window.StatusBar)" since the same function is run on non-cordova platforms (e.g. stand alone browser).

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    if (window.StatusBar) window.StatusBar.hide();
}

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/index.html


As a solution before a fix is released, I use jQuery .focusout() and simply start immersive mode again.

$('#page_textinput').focusout(function (event) {
    AndroidFullScreen.immersiveMode();
});

It is probably in the category "quick & dirty" but it works for me.


Need Your Help

How to respond to incoming messages to TCPListener Can I reuse existing connection?

c# .net tcp network-programming

I created TCP Server. It gets the message from a client and I would like send back response to it: "test meesage". I suppose that I have to use TCPClient class this time but I am not sure and I do ...

Service Layer DTOs - Large Complex Interactive Report-Like Objects

domain-driven-design service-layer presentation-layer

I have Meeting objects that form the basis of a scheduling system, of which gridviews are used to display the important information. This is for the purpose of scheduling employees to meetings, and...