I have an issue, when scrolling screen was jumping - the background appears blank white.
Can anyone help me?
Your question is not very clear but I think you want to disable the overscroll effect. Add the following to your config.xml as child element of the <widget> element:
<preference name="DisallowOverscroll" value="true" />
You can find the related docs here.
So I also faced this issue but then too I didn't solve my problem in IONIC 3 iOS build.
So you have to just go to Page html file and update -
<ion-content class="no-scroll">
Then go to page scss file and update the css-
.no-scroll {
div.scroll-content {
overflow-y: hidden;
}
This will work. Happy coding!!
In case of Ionic Vue
<ion-content :force-overscroll="false">
https://ionicframework.com/docs/api/content
Related
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 have a very weird problem. In my cordova app on iOS I am getting a pop-up text-select magnifying glass when I long-press anywhere in the app.
Example:
The bubble at the top is locked to the top of the screen, and follow my x-position when moving my finger from side to side.
I have tried to add the following css which people say should fix my issue:
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
}
This does not help. Looking at things in the web-inspector, I can confirm that this css is successfully added to everything. I have tried a bunch of different variation of the normal touch-callout: none and user-select: none everyone suggest and nothing seem to help.
I have also tried to remove all javascript and all CSS except a simple variation of the above mentioned, and the magnifying glass still appears.
How can I get it to go away? Is there any plugin that can be causing this issue? Any help is much appreciated.
Cordova plugins:
com.mbppower.camerapreview
cordova-plugin-statusbar
cordova-plugin-whitelist
ionic-plugin-keyboard
org.apache.cordova.camera
org.apache.cordova.console
org.apache.cordova.device
org.apache.cordova.dialogs
org.apache.cordova.file
org.apache.cordova.file-transfer
org.apache.cordova.network-information
org.apache.cordova.vibration
Cordova version: 5.1.1
iPhone 5s with iOS version: 9.0.1
Thank you for that Automatico! Saved me from a lot more frustration.
Since then however it looks like that code has been merged into mainline cordova and can just be enabled by adding
<preference name="SuppressesLongPressGesture" value="true" /> to config.xml
That worked perfectly for me!
Here is the commit and notes that brought it in
https://github.com/apache/cordova-ios/commit/1ad9951c80dbf97281e763f5f27a9bc8852c0537
Apparently, in iOS 9 there is a bug which makes the -webkit-user-select: none; not work. There is a plugin which fixes this
https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix
Thanks to Frederik Wessberg https://stackoverflow.com/a/32737049/741850
I have an issue with phonegap on windows phone 8. I want to have my app with the status bar, so I set:
<preference name="fullscreen" value="false" />
in "config.xml" file but my app contains a footer and this footer are shift because of status bar.
Anybody can help to fix that ?
I already set the "meta viewport" but no change.
try this .... set viewport in css file
#-ms-viewport{
width:device-width;
}
#-ms-viewport{
height:device-height;
}
http://trentwalton.com/2013/01/16/windows-phone-8-viewport-fix/
i developed one app using phonegap i used all solutions with status bar but this problem not solved. i had used "plugin name="org.apache.cordova.statusbar" version="0.1.4" plugin in config.xml file. this problem come only for windows so i hide status bar only for windows
<script>
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
function startEvents() {
StatusBar.hide();
}
}
</script>
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.
I'm working on an app using phonegapp 2.5. Now I'm running in some problems. I've tried to disable this annoying rubber-band effect. Reading the phonegap documentation, i have found this
<preference name="UIWebViewBounce" value="false" />
After adding this to the config.xml the rubber-band effect should be disabled, but this is not work for me. It just prevents, that the whole app is scrollable. The divs in my body are still scrollable and are overscrolling (rubberband effect). I already tried different solutions, none of them are working. Im wondering why the line above are not solving my problems.I already tried the new preference (phonegap 2.7 i guess)
<preference name="DisallowOverscroll" value="true" />
with no effect.
Had someone the same problem or any suggestions to solve this?
you are doing it right and It should work. Check once if UIWebViewBounce is set to true on appDelegate.m file.