Header and Status bar spacing with Phonegap


#1

First, hello - my first post. Second, thanks for ionic and for all of the great support from this community. I have run across one that I can’t seem to resolve from existing posts. I started with a menu based application, and I’ve been building and testing using “ionic serve” on the desktop as well as with the Phonegap Developer app. Everything is working well with those two approaches. When I actually go to compile using Phonegap build, the header is getting squished up against the status bar.

I have tried various things such as including both the Cordova and Phonegap versions of the status bar plugin, as well as not including them e.g.:

<gap:plugin name="org.apache.cordova.statusbar" />

as well as changing the value and even eliminating this preference.

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

When rendered in the desktop browser or the phonegap developer app, we get this:

When built with phonegap build, it renders like the below.

None of these things seem to make it render any differently. Any suggestions? Thanks!


#2

Are you also including the device plugin? That is need to know if the device is an ios device or not


#3

Thanks for the quick response. I was not, so now I am, but this does not change the result.

	<preference name="StatusBarOverlaysWebView" value="true" />
	<gap:plugin name="org.apache.cordova.device" version="0.2.8" />		
	<gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" />

Setting StatusBarOverlaysWebView to true vs. false does not seem to make a difference either.

Any other suggestions?


#4

I was able to resolve this by including every single core Phonegap/Cordova plugin. I was planning to add them as needed. Instead I thought I’d just include them all, and it started working as expected. Not sure which of them did the trick.

<gap:plugin name="org.apache.cordova.battery-status" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.media-capture" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.contacts" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
<gap:plugin name="com.phonegap.plugin.statusbar" />

#5

You should notice that:
org.apache.cordova.statusbar does not support <preference name="StatusBarOverlaysWebView" value="false" /> in config.xml,
and Phonegap Build does not support <preference name="StatusBarOverlaysWebView" value="false" /> even if you use com.phonegap.plugin.statusbar instead.


#6

Thanks for the response! I think I have this working as I want it to. But for future reference, since these tags aren’t supported, is there a way to turn off this preference? Does omitting <preference name="statusBarOverlaysWebView value="true" /> mean that by default it is false?