Change statusbar color to white in Phonegap - ios

I currently develop an app with phonegap and need to change the color of the statusbar to white text, right now it is black. I am testing on iOS 10 with the official app from PhoneGap.
The statusbar-plugin is installed, I already have checked via terminal (cordova plugin ls). Also, the term <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" /> is part of my config.xml.
I tried to change the statusbar with <preference name="StatusBarBackgroundColor" value="#000000" /> in my config.xml for example (I know this won't change the color to white, this was just a try to change the statusbar at all) – nothing has changed. None of the tips I found have changed anything – any ideas how to change the color?

Okay, I got it. Dumb mistake.
I deleted the default elements in index.html but forgot to edit the JS in the default index.js. After deleting the function which tried to change the missing element in my index, I finally was able to edit the StatusBar with StatusBar.styleLightContent();.

Related

Statusbar in Cordova-ios stays translucent

I am using the cordova status bar plugin and the statusbar is translucent and white. I am developing for iOS 11 witht he newest Version of macOS and xCode.
I researched the errors but none of the fixes proposed helped me.
Adding viewport-fit=cover to the meta tag at the index.html did not work.
Adding the feature tag with ios-package, as mentioned in the docs, to www/config.xml as a child to widget.
Adding the preference tag with StatusBarBackgroundColor and Overlay to the config.xml (as a child to widget and to ios) and www/config.xml did not works.
Using it in Code with the StatusBar global var inside a cordova.platformId = 'ios', has no effect.
In the end the app starts with a black bottom, the black bottom is gone and then there is the translucent status bar.
Adding this to my config.xml solved the problem for me:
<gap:plugin name="cordova-plugin-statusbar" source="npm"/>
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="default" />
So, i have ran into the similar issue, that i neede to my statusbar to overlay the WebView and be white with 50% transparency. So i investigated the plugin code and noticed, that if status bar overlays WebView - then the plugin ingores the background settings.
So the only solution was to fork the original plugin and modify it. You can take it here:
https://github.com/Fomenko-developer/cordova-plugin-statusbar
Installation:
cordova plugin add https://github.com/Fomenko-developer/cordova-plugin-statusbar.git

Status Bar on iOS Background Color

I’m having a hard time setting the iOS status bar background color to transparent. I’m using the latest version of cordova statusbar and ionic, and leaving everything to their default setting, however i’m getting a white background color for some reason. How can i set the background color to transplant, i though this is the default value anyhow.
Okay so after referring to:
https://issues.apache.org/jira/browse/CB-12886 and
https://issues.apache.org/jira/browse/CB-12890
The issue occurs in iOS 11, and cordova-ios-4.5.0 and is simply solved by adding the cover value to viewport-fit as follows in your index.html:
<meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
This worked for me:
Run cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
config.xml Add <preference name="StatusBarBackgroundColor" value="#" /> inside <platform name='ios'> tag
index.html Add <meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
Save.
Launch the simulator.
As maintained by luckystarr. Plugin cordova-plugin-statusbar will help you achieve what you want to do.
After adding plugin add following preference in config.xml to get black background
<preference name="StatusBarBackgroundColor" value="#000000" />
To change the color of icons and text in status bar you can use
<preference name="StatusBarStyle" value="lightcontent" />
Available values are default, lightcontent, blacktranslucent, blackopaque.
Please check Following
window.cordova.plugins.StatusBar.overlaysWebView(false);
It worked for me.
If you are using statusbar plugin, you should also update it to latest version (2.3.0 has just been released). This new version of the plugin handles the iPhone X notch.
BTW, the problem has nothing to do with the cordova-ios version, it's a new "feature" of the WebView when you compile the apps with iOS 11 SDK (it won't appear if you use Xcode 8 as it uses SDK 10). viewport-fit=cover is the way to go for removing this fake statusbar.

ionic status bar issue white - iOS

I am creating a mobile application with Ionic framework , When i test it with iOS device my status bar turn into white color after the application is fully loaded. I need to change the color from white to black. It works fine with Android Device.
This is the issue
I tried the following methods and nothing works
I made change to my config.xml file which was mentioned in many website as following
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
I further added the statusbar native event handlers under my app.component.ts
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
statusBar.backgroundColorByHexString('#000000');
statusBar.show();
splashScreen.hide();
});
is there a better solution to solve this issue.
The HTML of this project
app.html
<ion-nav [root]="rootPage"></ion-nav>

Phonegap windows phone 8 height content because of status bar

I have an issue with phonegap on windows phone 8. I want to have my app with the status bar, so I set:
<preference name="fullscreen" value="false" />
in "config.xml" file but my app contains a footer and this footer are shift because of status bar.
Anybody can help to fix that ?
I already set the "meta viewport" but no change.
try this .... set viewport in css file
#-ms-viewport{
width:device-width;
}
#-ms-viewport{
height:device-height;
}
http://trentwalton.com/2013/01/16/windows-phone-8-viewport-fix/
i developed one app using phonegap i used all solutions with status bar but this problem not solved. i had used "plugin name="org.apache.cordova.statusbar" version="0.1.4" plugin in config.xml file. this problem come only for windows so i hide status bar only for windows
<script>
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
function startEvents() {
StatusBar.hide();
}
}
</script>

phonegap 2.5 / IOS - Disabling rubber-band by editing the config.xml doesn't work

I'm working on an app using phonegapp 2.5. Now I'm running in some problems. I've tried to disable this annoying rubber-band effect. Reading the phonegap documentation, i have found this
<preference name="UIWebViewBounce" value="false" />
After adding this to the config.xml the rubber-band effect should be disabled, but this is not work for me. It just prevents, that the whole app is scrollable. The divs in my body are still scrollable and are overscrolling (rubberband effect). I already tried different solutions, none of them are working. Im wondering why the line above are not solving my problems.I already tried the new preference (phonegap 2.7 i guess)
<preference name="DisallowOverscroll" value="true" />
with no effect.
Had someone the same problem or any suggestions to solve this?
you are doing it right and It should work. Check once if UIWebViewBounce is set to true on appDelegate.m file.

Resources