CODEWITHSUNDEEP
javascripthtmlcsscordova
AmyllaVimiar
AmyllaVimiar

Reputation: 297

Add padding top to Cordova statusbar

I'm trying to create a cordova application with translucent statusbar. Using the Cordova-plugin-statusbar, I manage to this result. However, the content of the statusbar is overlapping with those native android statusbar content as shown in this image.

enter image description here

is there any other way to correct this?

Thank you

Upvotes: 0

Views: 1695

Answers (3)

FF_Dev
FF_Dev

Reputation: 578

You can use safe-area-inset-top CSS environment variable:

body {
  padding-top: env(safe-area-inset-top) !important;
}

If you have fixed elements, you also need similar rules to correct their position. Ex:

.status-bar {
  top: env(safe-area-inset-top) !important;
}

More information : https://developer.mozilla.org/en-US/docs/Web/CSS/env

Upvotes: 0

John
John

Reputation: 104

The cordova-plugin-statusbar increases the page height to include the area with device status info making your page area start at the top left of the screen instead of under the device status bar. You just need to add top padding to the your status bar area.

HTML:

<div id=".statusBar">...Status bar content...</div>

CSS:

.statusBar{
    position:fixed;
    display:block;
    width: 100vw;
    height: 20px;
    left: 0px;
    top: 0px;
    padding-top: 20px;
}

Depending on your intended appearance you may also want to use cordova-plugin-device to detect any differences in platform status bars too and modify CSS accordingly.

Upvotes: 1

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

Add these lines in your config.xml file:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<plugin spec="https://github.com/apache/cordova-plugin-statusbar.git" source="git" />

phonegap-developers-guid

Upvotes: 2

Related Questions