Comments (10)
That's not the status bar, is the safe area, if you want to get rid of it, add
viewport-fit=cover
to your viewport meta tag as a lot of people already commented.
But what should I do if I don't need cover, but just want to change color? In mobile safari this area has background-color of body tag. In cordova it's always white.
from cordova-plugin-statusbar.
Same Problem here.
However: This plugin partially fixed it for me: https://github.com/jcesarmobile/cordova-plugin-disable-ios11-statusbar
I would expect this to work with only this library.
from cordova-plugin-statusbar.
I fixed it doing this:
https://stackoverflow.com/a/46232813/751524
from cordova-plugin-statusbar.
@Dwarfex Exactly the steps that Stackoverflow response says.
from cordova-plugin-statusbar.
I have the same issue and I can't change the color of the status bar for any other color.
Just happens in iOS, in Android works.
from cordova-plugin-statusbar.
I also tried several "solutions" advised here: (https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator)
However "padding-top: env(safe-area-inset-top);" is not working for me as it does nothing to my layout.
I also noticed, that 'viewport-fit=cover' is not part of the displayed html anymore (altough part of the original html file) when inspected with Safari.
"cordova-ios": "^4.5.5",
"cordova-plugin-statusbar": "^2.4.2",
iOS 12 & 12.1
Cordova 8.0.0
from cordova-plugin-statusbar.
@utiq What exactly where the steps, that fixed it for you?
from cordova-plugin-statusbar.
Basically, you need to add splashscreen plugin to fix this issue @Dwarfex.
I was also having a weird issue using "window.cordova" before StatusBar, like window.cordova.StatusBar. This works well on Android, but not on iOS.
from cordova-plugin-statusbar.
@diegodotta I hoped so - but i already have added the plugin.
- I use viewport-fit=cover
- i use the splashscreen plugin with a "
<splash src="res/screens/ios/Default@2x~universal~anyany.png" />
" setting
so my application looks like the second image on the stackoverflow link
https://i.stack.imgur.com/VNFYb.png
But the variable "env(safe-area-inset-top)" seems to be "0" or not set as it has no effect on the layout. (even when used on simple divs)
from cordova-plugin-statusbar.
That's not the status bar, is the safe area, if you want to get rid of it, add viewport-fit=cover
to your viewport meta tag as a lot of people already commented.
from cordova-plugin-statusbar.
Related Issues (20)
- Failed to fetch plugin cordova-plugin-statusbar@cordova-plugin-statusbar via registry. HOT 4
- Add success and error callbacks for the `overlaysWebView` method
- StyleDefault will set light text instead of dark. HOT 3
- Xcode 12 and iOS 9.0 various deprecation
- 2.4.3 BROKEN - Replacement Release Desperately Needed HOT 5
- iOS - HTML video player full screen causes web view overlay issues HOT 2
- Empty space below the status bar on devices without notch and iOS 15.4 HOT 5
- Webview doesn't take full height after hide
- Device elements overlap ionic header HOT 6
- On android 12, statusbar styleDefault method not work as expected
- iPhone 14 Pro floating island status bar height incorrect HOT 5
- Status bar background color overridden on Android 13 HOT 2
- backgroundColorByHexString does not work? HOT 2
- Plugin not working on Android 13 with cordova [email protected] HOT 10
- change statusBar background color and icon color for only one screen(Page) for iOS and android HOT 1
- Android top and bottom content overlapped by status bar after upgrade from 2.4.3 to 3.0.0 HOT 10
- StatusBar not changing Color on Android 13 HOT 7
- StatusBar still there, stopped to work HOT 1
- Playing video on iOS and shifting from landscape to portrait messes up status bar HOT 5
- Bottom nav bar overlaps webview in Android 13 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cordova-plugin-statusbar.