Can't set statusbar color

1

I haven’t yet been able to get statusbar color using F7.
according to docs

It automatically detects if your app in full screen mode, and automatically adds with-statusbar class to element if app is in full screen mode (or removes this class if app is not in full screen mode).

In config.xml :
<preference name="Fullscreen" value="true" />

but here’s what I get

photo_2018-02-23_11-05-30
photo_2018-02-23_11-05-30.jpg720×1280 35.7 KB

Previously when I used Jquerymobile I used cordova-plugin-statusbar to set the statusbar color with no issues.
Now if use that plugin when the app starts the color is what I set in preferences but as soon as the app loads on my phone the stausbar text color turns black. And worse is that if a text field opens keyboard or if I minimize the app and reopen, the navbar goes behind statusbar
Here’s how it looks:

photo_2018-02-23_11-23-12
photo_2018-02-23_11-23-12.jpg720×1280 36.2 KB

Needless to say that I have this structure

<body>
  <!-- App root element -->
  <div id="app">
    <!-- Statusbar overlay element -->
    <div class="statusbar"></div>
    ...
  </div>
</body>

Any ideas?

2

I can recommend for andorid

  • use cordova-plugin-statusbar
  • use Fullscreen false
  • use “StatusBarBackgroundColor” in your config.xml
3

Thanks for your input. The second screenshot is just that.

<plugin name="cordova-plugin-statusbar" source="npm"/>
<preference name="StatusBarBackgroundColor" value="#303e8e"/>
<preference name="StatusBarStyle" value="lightcontent" />

It is weird that statusbar text turns black. I almost tried all combination of settings and got no luck. Finally I removed all parts of code containing with-statusbar class from framework7.js and now it is back to normal again. Text color remains white and and opening keyboard won’t cause navbar to go behind statusbar.

photo_2018-02-23_20-41-04
photo_2018-02-23_20-41-04.jpg720×1280 37.7 KB

1 Like
4

For future reading, whos facing same problem. When play with Phonegap / Cordova.

Im prefer using cordova-plugin-statusbar for control statusbar correctly via config.xml then do this following thing:

  1. inside yourFile.html remove or just comment out this part <div class="statusbar"></div>

  2. inside Main Instance of your app, you need to disable statusbar as well,

    var app = new Framework7({
    …
    statusbar: {
    enable: false.
    // many option you can set here, please see the guide
    }
    …
    });

Finally dont forget to add <preference ... /> in your config.xml file,

Footnote : documentation page https://framework7.io/docs/statusbar.html