I'm updating my Cordova-based application for iOS 8. I notice an issue with the status bar.
The status bar is positioned correctly after the first launch. But if I close the application and open it again, the status bar dissappears, so I have a blank gap of 20px in the top of my app screen.
What I use in my code for the status bar is :
if ( mobileOS == 'iOS' && Number( mobileOSver.charAt(0) ) >= 7 ) {
document.getElementsByTagName('body')[0].className+=' fix-ios-7-statusbar';
}
The class fix-ios-7-statusbar simply adds a padding-top:20px to the header. This works in iOS 7 very well, but in iOS 8 I have an issue with the status bar that is hidden if I close the app.
Please help me.
I use the statusbar plugin. There were issues in iOS8 (see here), but the latest git commit fixed those for me. Give it a try.
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git#5658e7548c813bf7d6102eea4eaa7726b727b18e
My config.xml has this:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#9BB06B" />
Related
I'm working on a mobile app using Phonegap/Cordova.
I built the ipa file using Phonegap Build and installed it on my iPhone.
I noticed when I scroll up or down at the edges of the view (like iOS bounce scrolling), the whole application view scrolls down (or up) and a gray background color appears.
I tried finding if there's a CSS code for that, but no luck.
I'm guessing maybe its something related to view-port.
Things to Consider:
- I'm using Framework7 v3
- PhoneGap Build cli-6.5.0
- iPhone 6S Plus
Screenshots of the issue:
What can be done to fix this bug?
Add the following to to your config.xml and then run cordova prepare:
<platform name="ios">
<preference name="DisallowOverscroll" value="true" />
<preference name="UIWebViewBounce" value="false" />
</platform>
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
I try to use the status bar plug-in in the config.xml to build with phonegap
and then change the color and StatusBarOverlaysWebView, ...
Everything's fine when opening the app in portrait. Statusbar in black above the appview and it remains OK when changing to landscape.
But opening the app in landscape gives me 3/4 of the screen (from the left) in black. If I change to portrait from there, the black remains.
Anyone else had this problem?
changing the phonegap version doesn't help
thnx
grtz
Change the plugin with this one:
<gap:plugin name="cordova-plugin-statusbar" source="npm" />
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.
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