Comments (13)
Playing around with your app, I did find some weird behaviour...
If StatusBar.overlaysWebView(true);
is called on deviceready
event, then the statusbar does not go into overlay mode as expected. Trying to call it again through the console and the API call appears to do nothing. Setting it to false
then true
again via the console appears to correct the problem.
Additionally, if I omit the StatusBar.overlaysWebView(true);
call on deviceready
altogether. Then invoke StatusBar.overlaysWebView(true);
via the console, it works the first time, 100% of the time.
Lastly if I do:
setTimeout(() => {
StatusBar.overlaysWebView(true);
}, 1000);
in the deviceready
event, consistently the statusbar goes into overlay mode (after a second delay obviously).
This tells me there is some kind of asynchronous or race condition problem with the plugin.
from cordova-plugin-statusbar.
I'd say there are actually two problems.
First is the one I described above. The second is overlaysWebView(true)
will clear the set background colour. I don't think this is necessary. Toggling the webview overlay should remember the set background color of the statusbar.
from cordova-plugin-statusbar.
@breautek thanks, but simply now I'm trying to make that status bar transparent without any color..
I tried your update, and there is still black statusbar.
If this value is not set, the background color will be transparent.
I did not set any background color. Check updated repo please.. and thank you, really!
from cordova-plugin-statusbar.
Setting (I'm wrong about this, they will not conflict)backgroundColorByHexString
and overlaysWebView(true)
are two conflicting states and I'm pretty sure they'll override each other.
If you want the status bar overlayed, then I would just use overlaysWebView(true)
.
Also, using overlaysWebView
will set/unset UI flags so AndroidFullScreen.setSystemUiVisibility(AndroidFullScreen.SYSTEM_UI_FLAG_FULLSCREEN | AndroidFullScreen.SYSTEM_UI_FLAG_LOW_PROFILE);
may be conflicting, but I'm not sure.
Note that right now, you must use the JS api StatusBar.overlaysWebView(true);
as you are using right now. The overlay preference is broken, pending PR #142 for a fix.
from cordova-plugin-statusbar.
I tried without setting backgroudColorByHexString
and its not working.
Also, I comment out AndroidFullScreen
.., same problem.
So, we wait for fix or ?
Thanks for quick response
from cordova-plugin-statusbar.
I need to make a correction.
Setting backgroundColorByHexString and overlaysWebView(true) are two conflicting states and I'm pretty sure they'll override each other.
I'm wrong about this, they will not conflict. You can have a status bar in an overlay state, and still set a background color to it.
Below should be all you need to set the statusbar to overlay mode. It will make the status bar transparent, and your webview will appear underneath the status bar (so padding-top
may be necessary). Similar to what you had before.
document.addEventListener('deviceready', () => {
StatusBar.overlaysWebView(true);
StatusBar.backgroundColorByHexString('#33000000');
});
This was tested on my android 9 device, if it doesn't work for you, then please provide a sample reproduction app. Learn more about creating a reproduction app at https://github.com/apache/cordova-contribute/blob/master/create-reproduction.md
from cordova-plugin-statusbar.
padding-top did not resolve my issue.
I have created simple blank application with:
StatusBar.overlaysWebView(true); StatusBar.backgroundColorByName("red");
, where on Android 9 statusbar is >black< and on PhoneGap dev application Statusbar is >Red<.
...
After some testing: I tried to alert(Statusbar);
- https://ibb.co/ssFfRW6
as you can see, there is red StatusBar behind, which is ok.
After clicking OK:
Something wierd is happening
from cordova-plugin-statusbar.
Please provide a sample reproduction app, then I can take a look at it.
https://github.com/apache/cordova-contribute/blob/master/create-reproduction.md
from cordova-plugin-statusbar.
Because two issues isn't really related I've created two new issues, specifically for issues I found, #158 & #159. That way both issues can be tracked or worked on independently. You're welcome subscribe to the new issues.
In the meantime, there are two workarounds that I can foresee:
The first one as I already stated it, wrap the StatusBar
APIs in a setTimeout
. This is obviously very dirty and might not be reliable however, and definitely doesn't make your app look very professional.
So I'd suggest another workaround:
I would fork this statusbar plugin, and apply the #142 PR to your fork. This will fix the StatusBarOverlaysWebView
preference inside config.xml
and allow you to set these modes without relying on the JS APIs. This should work as when I was experimenting with your app, I copied the statusbar state to plugin native initialization to see if the behaviour changed and when doing so, your app's statusbar was working as expected.
Let me know if any of these workarounds work for you
from cordova-plugin-statusbar.
Thanks for checking out my problem!
I tried your following example with setTimeout function, and still it's same problem, not working.
When I open application on android, it automatically shows me black statusbar ( which is ok ), and after timeout for few seconds nothing have changed.
Did you change something in config.xml, which, maybe working for you?
I would like to use that solution while plugin will be fixed.
I have commited my changes. Please check it out.
Regards
from cordova-plugin-statusbar.
I did change some stuff in your repo during my experimentation. I pushed my changes in a new branch on your repo.
from cordova-plugin-statusbar.
Okay I've found that using this structure works
StatusBar.overlaysWebView(false);
setTimeout(() =>
{
StatusBar.overlaysWebView(true)
setTimeout(() =>
{
StatusBar.backgroundColorByHexString('#22200000')
}, 100)
}, 100)
Kind of stinky but it's the only way to making it work 😂
I've also noticed that when not using this technique, focusing an input field and having the keyboard getting displayed makes the status bar render as it should.
Hope this helps
from cordova-plugin-statusbar.
I'm closing this issue in favour of the two issues reported at #158 and #159 to help keep things organized.
@Akronae Using timeouts like in your code snippet is a workaround to #158
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.