I am creating a mobile application with Ionic framework , When i test it with iOS device my status bar turn into white color after the application is fully loaded. I need to change the color from white to black. It works fine with Android Device.
This is the issue
I tried the following methods and nothing works
I made change to my config.xml file which was mentioned in many website as following
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
I further added the statusbar native event handlers under my app.component.ts
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
statusBar.backgroundColorByHexString('#000000');
statusBar.show();
splashScreen.hide();
});
is there a better solution to solve this issue.
The HTML of this project
app.html
<ion-nav [root]="rootPage"></ion-nav>
Related
I have added scrollAssist and autoFocusAssist property in app.module.ts. However it works only for android not for iOS.
how to disable bouncing effect of ios in ionic 3?
IonicModule.forRoot(MyApp,{scrollAssist: false, autoFocusAssist: false});
You can use this workaround:
.ios {
<your-screen> {
.scroll-content {
-webkit-overflow-scrolling: auto !important;
}
}
}
However, This is not recommended because it will disable smooth scroll as well. Read more about it here: https://github.com/ionic-team/ionic/issues/11584
Try this: in config.xml under platform put
<platform name="ios">
[....]
<preference name="webviewbounce" value="false" />
</platform>
I am using the cordova status bar plugin and the statusbar is translucent and white. I am developing for iOS 11 witht he newest Version of macOS and xCode.
I researched the errors but none of the fixes proposed helped me.
Adding viewport-fit=cover to the meta tag at the index.html did not work.
Adding the feature tag with ios-package, as mentioned in the docs, to www/config.xml as a child to widget.
Adding the preference tag with StatusBarBackgroundColor and Overlay to the config.xml (as a child to widget and to ios) and www/config.xml did not works.
Using it in Code with the StatusBar global var inside a cordova.platformId = 'ios', has no effect.
In the end the app starts with a black bottom, the black bottom is gone and then there is the translucent status bar.
Adding this to my config.xml solved the problem for me:
<gap:plugin name="cordova-plugin-statusbar" source="npm"/>
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="default" />
So, i have ran into the similar issue, that i neede to my statusbar to overlay the WebView and be white with 50% transparency. So i investigated the plugin code and noticed, that if status bar overlays WebView - then the plugin ingores the background settings.
So the only solution was to fork the original plugin and modify it. You can take it here:
https://github.com/Fomenko-developer/cordova-plugin-statusbar
Installation:
cordova plugin add https://github.com/Fomenko-developer/cordova-plugin-statusbar.git
I currently develop an app with phonegap and need to change the color of the statusbar to white text, right now it is black. I am testing on iOS 10 with the official app from PhoneGap.
The statusbar-plugin is installed, I already have checked via terminal (cordova plugin ls). Also, the term <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" /> is part of my config.xml.
I tried to change the statusbar with <preference name="StatusBarBackgroundColor" value="#000000" /> in my config.xml for example (I know this won't change the color to white, this was just a try to change the statusbar at all) – nothing has changed. None of the tips I found have changed anything – any ideas how to change the color?
Okay, I got it. Dumb mistake.
I deleted the default elements in index.html but forgot to edit the JS in the default index.js. After deleting the function which tried to change the missing element in my index, I finally was able to edit the StatusBar with StatusBar.styleLightContent();.
I am newbee to Kendo UI.
I am using AngularJS and Kendo UI for developing iOS app. How should I avoid overlapping of Stats bar and navigation bar?
Here is How I added navigation bar but it gets overlap with stats bar
<body kendo-mobile-application k-hash-bang="true" ng-app="MobileAppModule" platform="'ios7'">
<kendo-mobile-layout k-id="'default'">
<kendo-mobile-header >
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
</kendo-mobile-layout>
<kendo-mobile-view id="abc" k-title="'Home'" k-layout="'default'">
Hello world
</kendo-mobile-view>
How should I avoid overlapping of Stats bar and navigation bar on iOS 7 and above?
How to set colour of status bar?
I know how to do it using markup language from link: http://www.telerik.com/blogs/everything-hybrid-web-apps-need-to-know-about-the-status-bar-in-ios7
Everything you mentioned can be done using the cordova-plugin-statusbar
<gap:plugin name="cordova-plugin-statusbar" source="npm"/>
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
By default a app made with cordova starts at the left bottom corner:
I would prefer that it starts under the status bar on iOS.
I'm using cordova and bootstrap, what I do now is a overrides.css in the folder: merges/ios/css:
.app {
position: fixed;
top: 20px;
}
This works, but I was wondering, is this a good way?
There are multiple ways to solve this. Your solution works fine. But if you would like to have some more control over the behavior and look of the status bar, you should try the Statusbar plugin for Cordova:
$ cordova plugin add org.apache.cordova.statusbar
and then configure the statusbar look in the config.xml file:
<widget ...>
...
<preference name="StatusBarOverlaysWebView" value="false"/>
<preference name="StatusBarBackgroundColor" value="#000000"/>
<preference name="StatusBarStyle" value="lightcontent" />
</widget>