CODEWITHSUNDEEP
ioscordovawebview
user3740962
user3740962

Reputation: 153

Cordova iOS white bar at top

After adding StatusBarOverlaysWebview to config.xml, i get a white bar at the top of the screen and all the content is pushed down (see screenshot - there is a white bar on top of the statusbar). So instead of just adding the statusbar height (20px) to the screen, it adds 40px.

I double-checked all my styling and everything looks fine, so i guess its caused by the plugin somehow. Can anyone tell me how to solve this?

This is my config: 

<preference name="StatusBarOverlaysWebview" value="false" />
<preference name="StatusBarBackgroundColor" value="#FF543E" />
<preference name="fullscreen" value="true" />

enter image description here

This is what it looks like without setting a color and using window.StatusBar.overlaysWebView(false); instead of config.xml

enter image description here

Upvotes: 5

Views: 4385

Answers (5)

HardikDG
HardikDG

Reputation: 6112

Try this, below code is working for me:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#2D81C1" />
<preference name="Fullscreen" value="false" />

if you still have problem and if the same code was working for you in the previous builds, please check if plug in is installed and working properly

Update: For iOS 11 and iPhone X there are some changes in the library and HTML meta tags

In index.html change meta tag to this:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Please update ionic-angular library also for the latest devices support

More information here: iOS 11 ionic checklist

Upvotes: 5

Steve W
Steve W

Reputation: 1110

This appears to be a bug with the way Cordova handles iOS 11's statusbar. As a fix, you can put 

    <meta name="viewport" content="viewport-fit=cover">

in your index.html.

Upvotes: 1

Number_987
Number_987

Reputation: 123

I think you use OnsenUI so that will be the problem... Not the statusbar plugin. Try ons.disableAutoStatusBarFill(); to solve the problem ;)

Upvotes: 0

Aditya Singh
Aditya Singh

Reputation: 16660

Try using this:

config.xml Add the below for statusbar:

<preference name="StatusBarBackgroundColor" value="#FFFFFF" />

app.run.js

if (window.StatusBar) {
  // cordova plugin org.apache.cordova.statusbar is used
  window.StatusBar.styleLightContent();
}

Upvotes: 0

Jay Rathod
Jay Rathod

Reputation: 11245

This Stuff is working for me in my app using Status Bar Plugin.

Try with below code.

 <preference name="StatusBarOverlaysWebView" value="false" />
 <preference name="StatusBarStyle" value="lightcontent" />
 <preference name="StatusBarBackgroundColor" value="#FF543E" />

Upvotes: 0

Related Questions