The status-bar content and page content were getting mixed up, making user unable to perform any operations provided in the header.
While looking for solution we found cordova plugin cordova-plugin-statusbar which provides some functions to customize the iOS and Android StatusBar. To use this plugin we need to add some lines to our
config.xml file in cordova folder.
First we need to add permission for
cordova-plugin-statusbar to make changes to the status-bar. For that we need to add
<feature name="StatusBar"> <param name="ios-package" value="CDVStatusBar" onload="true" /> </feature>
Depending on what changes you need to make to status-bar you can use different functions, for example
To make the statusbar overlay or not overlay the WebView at startup add,
<preference name="StatusBarOverlaysWebView" value="true" />
To set the background color of the statusbar by a hex string (#RRGGBB) at startup. If this value is not set, the background color will be transparent,
<preference name="StatusBarBackgroundColor" value="#000000" />
To set the status bar style,
<preference name="StatusBarStyle" value="lightcontent" />
This plugin also provides functionality to hide status-bar for gaming applications.
However, still after adding all these, the changes were not reflected and page content and status-bar were still getting mixed up. On further debugging we found that something in our application was overriding the changes we made for status-bar. So we decided to make changes manually using the same plugin
StatusBar global object which you can catch and use to make changes to the status-bar, so we added a little script in our
index.html file which overrides the config.xml settings.
The reason to add changes after
deviceReady event is
StatusBar object is not available until after the deviceready event.
After adding changes in
index.html file the issue was solved and status-bar and page-content were separated.
So one reason I wanted to share this was it can save somebody's time as we spent a good amount of time looking for solutions and following different approaches.
Subscribe to Engineering At Kiprosh
Get the latest posts delivered right to your inbox