Pretty simple question really. I want to be able to change the font color of the statusbar in my Phonegap app. Note: I am not using Phonegap Build, just building the app in phpStorm and using Phonegap serve to show it in my iPhone app.
I have searched Google and Stackoverflow for possible solutions and they all don't work.
Tried solutions:
Meta tag index.html
Editing MyApp-Info.plist (Phonegap - How do i make the statusbar black?)
Using several Phonegap/Cordova plugins and editing the config.xml. This gave me various 'cannot be parsed' errors when launching phonegap serve
Do you have tried the status bar plugin? It's should work.
Just install the statusbar plugin by terminal:
cordova plugin add org.apache.cordova.statusbar
Then set your style preferences for the status bar, using your config.xml:
<preference name="StatusBarBackgroundColor" value="#000000" />
I think that you can only set custom background color for the status bar in iOS, or just set white/black color for font but nothing else.
I repeat, not 100% sure but I think you can't set custom font color for status bar in iOS.
Related
I'm using Capacitor with Ionic 5 and I need to change the status bar background color dynamically (different colors on different pages). On Android everything works fine (both capacitor and cordova plugins work), but on IOS I found out some limitations:
cordova-plugin-statusbar is not compatible with Capacitor for IOS
From Capacitor status bar plugin, the method setBackgroundColor is not supported for IOS
Is there any workaround to achieve my goal on IOS?
Finally, I found a solution. Status bar on IOS is transparent, so there is an easy solution to just set the background color on the body of the app, for example: document.body.style.backgroundColor = "#e34233";.
I am using "cordova-plugin-statusbar" varsion 2.4.2
I have solved this issue by this:
this.statusBar.backgroundColorByHexString('#3300000000');
You can dynamically set your status bar color
I'm submitting cordova build to android and ios.. unfortunately on ios, navbar falls down in every menu.
White space on top
Navbar pushed down and not sticking to top when scrolling
I'm using node.js v8.11.2, cordova 8.0.0, 9.0 ios deployment target and i've tried in every iphone, navbar keeps falls down.
<preference name="StatusBarOverlaysWebView" value="false"/>
<preference name="StatusBarBackgroundColor" value="#000000"/>
<preference name="StatusBarStyle" value="lightcontent"/>
I also read some post about IOS status bar problem and tried to add some code above to config.xml and still not working as expected.
Isn’t it because on top of iOS displays are system info data (time, Wi-Fi etc.). So app is basically pushed down, so best way for me was specify “StatusBarBackgroundColor” to correspond with your navbar.
Steve
On Phonegap 3.7.0, when the keyboard appears on iPhone or iPad, the web view is not resized, and the keyboard ends up above the footer. I would like the web view to be shrunk so that the footer would remain visible. Is there anyway to fix this?
I've seen a lot of questions here to actually achieve the opposite, but that was with previous versions of Cordova/Phonegap.
FYI, I tried the following: resize the body when the keyboard appears (I use the Ionic keyboard plugin to know when it is shown and it's height) and change the bottom value of my footer. This does work on iPhone 6.1.3, but not on iPhone/iPad 8.*. Even if the body is smaller, the body is still scrollable, as if it still was 100%. I tried removing my meta tag content with width=device-width, but it didn't change anything.
One option is to use a plugin to shrink the native WebView. Add cordova-plugin-keyboard to you project:
phonegap plugin add cordova-plugin-keyboard
then in your config.xml add
<preference name="KeyboardShrinksView" value="true" />
or call this method in your javascript
Keyboard.shrinkView(true);
I have created a PhoneGap project and bind iOS platform to it,
Previously their is no StatusBar . So i installed a plugin to it called,
"org.apache.cordova.statusbar"
This looks great and status bar appeared in html page , But if try to load status bar in to another iOS plugin , it doesn't appear properly. It does in portraide mode. but not the landscape
This happens only in iOS 8 but not in iOS 7
You have to update status bar pulgin that is
cordova plugin add https://github.com/phonegap-build/StatusBarPlugin.git
Or else u can made some code changes according to this article.
http://ciesielskipiotr.com/status-bar-troubles/
I have a Cordova iPhone app, which uses the statusbar plugin. The status bar's background is set to black, and the text used to be white. But since upgrading the plugin from version 0.1.3 to 0.1.8, the text is now black.
Is it possible to get the old behavior back, or to specify the text color?
Information for debugging:
Using Cordova 3.6.3 and statusbar plugin 0.1.8.
I see this behavior on iOS 8 and 7.
The iOS project has the following configs:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
I'm using Xcode 6.0.1, with iOS SDK 8.0. In Xcode, "Hide status bar" is unchecked, and "Status Bar Style" is set to Default (but the same thing happens when I set it to Light).
The JavaScript StatusBar.isVisible returns true, and if I call StatusBar.backgroundColorByHexString("#FFF"), the background lightens, so the black text becomes visible.
This wasn't clear from the documentation, but there's a StatusBarStyle preference, and even if it's not present, it seems to override "Status Bar Style" from Xcode's project settings. So setting this in Cordova's config.xml fixed the problem:
<preference name="StatusBarStyle" value="lightcontent" />
I stumbled upon this tool that let's you toggle the setting for the status bar plugin and copy and paste in the preferences to config.xml. It's just what I needed! Hopefully helps others:
http://hollyschinsky.github.io/phonegap-workshop/develop/status-bar-handling.html