iOS 7 status bar overlapping UI - Need solution for Cordova 3.0

Question

I have a PhoneGap / Cordova 3.0 app. The status bar overlaps the UI in iOS7. I've read many answers saying to use margin-top:20px or a custom StatusBar plugin. the problem is that with margin-top, when I have a text input in focus, it pushes all the view up (which is expected), and when it loses focus, the view stays at the top and ignores the margin 20px value.

The StatusBar plugin needs Cordova 3.1, and I want to use the 3.0 version, so the plugin solution is not good for my specific application.

Is there a solution to solve the statusbar overlapping issue in Cordova 3.0?

I want the statusbar to be active (not hidden). I develop on windows using AppBuilder.

Answer 1

If you don't want to hide status bar check this solution

function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}


document.addEventListener('deviceready', onDeviceReady, false);

OR Hide the status bar

Open Project in xcode first select checkbox ( hide during application launch ) under status bar style - general project settings in xcode

select projectname-info.plist (Resources section in xcode)

and add key "View controller-based status bar appearance" and value "NO"