Framework7 can't show device status bar

[Arthur_T_]

I'm newbie on Intel XDK. Attached is a simple Standard HTML5 application using App Designer and Framework7. I'm using Intel XDK ver3240 run on iMac OSX El Capitan. When you run the app on iPhone through Debug page (same for using ipa through Build tab), you will see the device status bar is just a white color bar. I haven't choose Fullscreen in project settings. (in fact, it is same with a white device status bar on top for either Fullscreen is checked or not)

Anything wrong? How can I show the device status bar on top with text on it?

P.S. I chose Framework7 among the others after evaluation (already read the FAQ about which UI framework is the best)

[Amrita_C_Intel]

What happens when you build the app and install on actual device? Is it same behaviour or different?

[Arthur_T_]

When I build for iOS, the ipa run on the device can show the device status bar. However there is 1 minor issue, when I drag down the screen, the status bar white background will scroll down too. i.e. left the status bar black text stay on top of the screen but the white background will drag down together with all my screen details.

Although my target is having the device status bar with my app. I tried check "Fullscreen" option in the project and build the ipa for iOS. However the device status bar still show when the app run. Anything I need to do in order to make the app in full screen mode so that the device status bar will not show? I'm using iOS theme.

Besides, could you get/see attachments of this post? As I can't see it after attach the files to this post. So just wonder whether others can see and get my attachments.

P.S.

The project I created with the mentioned problem is very simple. I just create a new project with Framework7 as UI framework. Then drag a button to the screen. That's all.

[PaulF_IntelCorp]

Add the following lines to your intelxdk.config.additions.xml file:

<platform name="ios">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="FadeSplashScreen" value="false"/>
    <!-- <preference name="FadeSplashScreenDuration" value="3000"/> -->
    <preference name="ShowSplashScreenSpinner" value="false"/>

    <!-- below requires the status bar plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-statusbar -->
    <!-- see http://devgirl.org/2014/07/31/phonegap-developers-guid -->
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="StatusBarStyle" value="lightcontent" />

    <!-- to select between building for iPhone, iPad or both -->
    <!-- https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html -->
    <!-- valid values are handset, tablet and universal -->
    <preference name="target-device" value="tablet" />

    <preference name="DisallowOverscroll" value="true" />
</platform>

And please study the references in the above for further details regarding the values for these preferences.

[Arthur_T_]

Thanks Paul, it works and I will look at the references for the preferences too
 

[Arthur_T_]

Just found out if I build for iOS with orientation in project is all. Then if I rotate my iPhone, the status bar will not show.

P.S. iOS version 9.3.1, XDK version 3240

[PaulF_IntelCorp]

Arthur -- it's probably due to a bug in the status bar plugin. Try a different version of the plugin. I just tried it with my iPod test device and it works fine.

[Arthur_T_]

But my project is a standard HTML5, so don't need status bar plugin.

P.S. Tried new a project in XDK 3357 but got the same result.

Steps:

- create a standard HTML5 new project using App Designer and Framework7

- set iOS project orientation to all

- build and deploy to iPhone

- rotate iPhone without status bar show