Book Image

PhoneGap By Example

Book Image

PhoneGap By Example

Overview of this book

Table of Contents (17 chapters)
PhoneGap By Example
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using the Cordova StatusBar plugin to fix overlap


When you start the application for the first time on an iOS device, you will realize that there is some issue with the status bar when the application is running. Here is how the status bar looks on my device:

You can see that the text in the status bar is white, and only the battery indicator is green. Also, you can see that the status bar overlaps our title bar. This is due to the iOS 7 change for ViewControllers (containing WebView running our PhoneGap application) to display full screen by default with a transparent status bar overlaying them rather than having their own designated space in the top 20 pixels of the screen as you saw earlier. There are two possible solutions:

  • Provide CSS adjustments to the title bar; add some margin at the top and make its background dark

  • Use the Cordova status bar plugin to do it natively

I prefer to use the second approach, because the first one looks more like cheating than a good solution.

To install the...