coderama coderama - 2 months ago 18
Android Question

Android Phonegap Compilations adds bar at the bottom of app that should not be there?

I've looked everywhere and tried just about everything, but I can't get rid of this random black bar appearing at the bottom of my PhoneGap App. This is what I am seeing when I run the app:

enter image description here

The interesting part is that if I minimize the app and then open it again, it automatically fixes the display and the bottom bar disappears. But why?! How can I get it to not show this bar from the moment the app opens?

Also, this does not happen in Chrome on my desktop computer. It only happens after the app is compiled at build.phonegap.com.




WHAT I TRIED:

This question seems to describe exactly my problem, but I've tried everything discussed there but with no luck. It mentions that if you have:

<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>


That you should try:


  1. Removing the viewport meta tag completely (did not work)

  2. Only removing the "height" portion. I.e. height=device-height (did not work)



More advice there seems to say: "Yes, it's a jquery mobile issue. The style is set whenever the viewport size changes."

For this I tried setting CSS:

.ui-page-active {
height: 100% !important;
min-height: 100% !important;
}


Did not work...

So then I thought, maybe if i can "fool" the app into resizing the window, that might work. So I tried adding this:

$(window).trigger("resize");


Did not work.

Then I thought okay, maybe it's something else in my code. So I stripped down the entire file to a VERY barebones file with ONLY one index div. And it STILL happened.

I also tried fiddling with config.xml. I edited this:

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


And changed it to:

<preference name="fullscreen" value="false" />


This made no difference.

I also made sure I have the latest versions of everything (and I do). I have:


  • jQuery Mobile Version 1.4.5

  • jQuery v1.11.2



I also found this post describing the same thing. But no solution there either. (Even offered a bounty on there with the hope of drawing some attention)

So I'm really out of options here. Anyone who could give me any clues as to what setting I am missing or what I am doing wrong that is causing this annoying bar to show up at the bottom of my app, would be my hero. Any advice?

Answer

I experienced the very same issue using only <preference name="Fullscreen" value="true" /> in my config.xml.

I initially thought of the Android status bar, but had some research on that topic and now got a very strong believe, that this issue comes from some other Android system UI not being hidden until the Cordova wrapper finished init, resulting in a wrong calculated size for the wrapper.

After a long search and trying out nearly everything you also mentioned in your other thread, I stumbled upon a plugin:

https://github.com/mesmotronic/cordova-plugin-fullscreen

I'm now using this in the confix.xml

<preference name="Fullscreen" value="true" />
<preference name="AndroidLaunchMode" value="singleInstance" />
<preference name="DisallowOverscroll" value="true" />
<preference name="KeepRunning" value="true" />

And this directly in first playe of the method triggered on deviceready

if (AndroidFullScreen) {
    // Extend your app underneath the status bar (Android 4.4+ only)
    AndroidFullScreen.showUnderStatusBar();

    // Extend your app underneath the system UI (Android 4.4+ only)
    AndroidFullScreen.showUnderSystemUI();

    // Hide system UI and keep it hidden (Android 4.4+ only)
    AndroidFullScreen.immersiveMode();
}

Tested so far with Android 6.0, 5.0.1 with harware navigation and software navigation devices. Maybe that could help you aswell.

Comments