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>
Related
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 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>
I have to set the duration of a splash screen. In Android this is quite simple:
(android)config.xml:
<preference name="SplasScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000"/>
SplashScreen: value = splashscreen name in the res/drawable directory. It's recommended to have one name (screen.png) for all types of resolution.
SplashScreenDelay: value = delay in ms (2s)
I have no idea how this could be applied to iOS. At the moment I have set all splashScreens which are loaded at the app-start. After that I have a white screen with a spinner before my app-content is displayed.
This is my standard xml-setting:
(iOS)config.xml:
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value=".25" />
<preference name="ShowSplashScreenSpinner" value="true" />
If I set ShowSplashScreenSpinner to false, the spinner doesn't appear. Updates to the rest of the settings don't take any effects.
Does anyone know what to do to show a splashScreen in iOS for a optional time?
You can set it a bit differently like this:
First set:
<preference name="AutoHideSplashScreen" value="false" />
So it will not hide the splashscreen automatically.
Second:
In your index.html do this:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);
}
This will hide the splashscreen 2 seconds after the onDeviceReady event.
Instead of 2000 milliseconds you can set whatever you want. This setting should work for both Android and iOS.
in config.xml update
<preference name="FadeSplashScreenDuration" value="800" />
<preference name="SplashScreenDelay" value="3000" />
So it will not hide the splashscreen time and whitescreen automatically.
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>
I am now using the latest version of PhoneGap (3.4) and iOS7.1 beta3, and i find the body (maybe call UI View element) have a bad property of bounce just like the pic below, and i want to disable it. I tried to search on the website, and i find only
<preference name="DisallowOverscroll" value="false" />
works for me, BUT i find this preference make bounce disabled in all elements in my App, and i just want to disable the body`s bounce just like the pic below, and keep bounce in div elements.
Is there any way to solve this issue out?
You need both of these preferences in your config.xml file:
<preference name="webviewbounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
You can then enable iOS-native-style scrolling on nested containers with:
.scrollingArea
{
width: 100%;
height: (some-fixed-height);
overflow: hidden;
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch;
}
You may also find it useful to capture and block the touchmove' event on certain elements that you don't wish to be user-scrollable (depending on your layout).
There is a way I used to achieve this. but it's not conventional because it's dealing with native coding. In the MainViewController there is a method named webViewDidFinishLoad. Include this
theWebView.scrollView.bounces= NO;
inside that method.
- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
// Black base color for background matches the native apps
theWebView.backgroundColor = [UIColor blackColor];
theWebView.scrollView.bounces= NO;
return [super webViewDidFinishLoad:theWebView];
}
As this is ios native code, so this'll work in any phonegap/cordova distribution.