I'm using Cordova to build Android/IOS app with Javascript
Versions:
cordova-android: 6.2.3
cordova-ios: 4.4.0
Before continue actions, user must be re-ask to confirm. A comfirmation popup will be displayed.
Problem is user can scroll background screen when popup shown in their own device. In development environment (browser), its working perfectly by setting popup wrapper full size of screen. I need disable scrolling in device for this case.
What are the best and simplest ways to fixed it?
Sorry for my bad English!
<preference name="DisallowOverscroll" value="true"/>
put above line in your config.xml.
JS solution could be putting :
document.querySelector('body').classList.add('noscroll');
just before the confirmation popup.
And remove it after:
document.querySelector('body').classList.remove('noscroll');
where noscroll is a class defined in (for example) in styles.css:
.noscroll {
overflow: hidden;
}
Related
Using Avada theme and not sure what version of Bootstrap they have integrated, but on mobile when I open a modal it scrolls the page to the top. I've tried a few solutions from the wild, but none have worked so far.
I just experienced the same issue on Avada 5.5.2. Here is the exact question my coworker emailed me this morning.
I'm working on the *******.com website. The modal
windows work as they should on desktop. However on mobile, when a modal
link is clicked the modal window pops up just fine, but it also
scrolls the page back to top. Avada includes a # in the href line when
using these bootstrap functions, and won't let me remove it.
So, here's what I tried, without success: ....
After going in a lot of incorrect directions, the solution that worked for me was one simple css tweak. Add the code below labeled "solution" to your child theme, or directly into your Avada Options as done in the screenshot.
fusion-10.min.css
The style sheet fusion builder creates is forcing fixed positioning.
.ua-mobile .modal-open {
position: fixed;
overflow: hidden;
}
Solution
Override the fusion style sheet as such.
.ua-mobile .modal-open {
position: relative;
}
I am trying to implement Gigya for our sites. However, when mobile site loads (registration page), it adds the following class to the html gigya-mobile-modal-model that causes the page showing white page rather than the page.
When the html has no such class gigya-mobile-modal-model, then the page shows the form.
How to ensure for mobile devices gigya does not add gigya-mobile-modal-model?
I added the following in gigya console/css. However, I really will like one of the core Gigya developer to look into this.
html.gigya-mobile-modal-mode,
html.gigya-mobile-modal-mode body,
body.gigya-mobile-modal-mode {
overflow: inherit;
height: auto;
}
And that seemed to fix the bug for me
It would be interesting to know if there is an elegant solution for that.
I had implemented a workaround:
- added some styles for this white overlay
- added some restrictions to the height and position of the popup content
- added some JS to prevent page from 'jumping' after the registration screen has been closed.
I had this exact problem, and this CSS worked for me:
html.gigya-mobile-modal-mode,
html.gigya-mobile-modal-mode body {
overflow: visible !important;
}
Not very elegant, but... it did the trick. YMMV.
I'm trying to have the index page of my app viewed only portrait. I've surfed the web but I didn't manage to find anything, except for window.orientation which it doesn't work to me. How can i do? I'm using Cordova (HTML, CSS and javascript). Thank you guys!
In your config.xml file add/change this line in your global preferences .
<preference name="Orientation" value="landscape" />
Delete any existing orientation settings if there are any .
fyi. file location should be in following : app/www/config.xml according to:
https://cordova.apache.org/docs/en/4.0.0/config_ref/
If you want to lock orientation in a particular page use the following plugin link
http://github.com/gbenvenuti/cordova-plugin-screen-orientation
So by using this plugin while loading page you can lock the orientation and while leaving or unloading the page you can unlock the orientation.
I'm writing an angular directive for a video player.
I'd like to have custom controls that should override the native one.
In normal mode all works fine while in fullscreen mode no.
Actually the problems occurs in IE11 and Microsoft Edge.
In IE11: both the native bar (ok) and the custom one (ko) are
hidden. I can't show my bar.
In Edge: I can't hide the native controls bar and I can't show my
bar
To hide the bar I tried with
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-enclosure {
display:none !important;
}
but seems that in microsoft browser doesn't work.
I already read and follow this post about almost the same problem change html5 video controls layout when fullscreen
The problem has nothing to do with angular, but I can't figure out where put my hands to get things works: in the css or do I have to use javascript (how?) to handle the show/hide behaviour of the native control bar?
This is a plunk http://plnkr.co/edit/zGlMN0Qys2yHdWgGXefk?p=preview where you can find my javascript pure code.
I really appreciate any help to get things work!
Luca
The solution resides in the way the requestFullscreen is called.
Before I called that method on the video element
$scope.videoElement.requestFullscreen();
Instead the requestFullscreen method have to be called on container element in order to ensure that the element's children, e.g. the custom controls, go fullscreen also
$scope.videoContainer.requestFullscreen();
I am developing an Application using Phonegap on Android. Everything works fine on OS 2.1 but on OS 2.2 when we click on any input type text field the keyboard appears and whole window moves to UP side and the input type field becomes invisible. Can anybody tell me what exactly be the problem and can it be solved using javascript? How to stop windows resizing functionality on Android 2.2?
I found the same problem on Text Input on android phone is not in view when the keyboard for webview comes up? also, but not the solution.
Adding this
android:windowSoftInputMode="adjustPan"
to your in AndroidManifest.xml will solve the issue
I tried to put following css property and it was working for me on Android 2.2
html, body{overflow: hidden;}
Not sure why it is working, but it is working...
Note: I used "iScroll" plugin for scrolling in my application.
I've never used PhoneGap but I went to their site and I am to understand that it still works via Eclipse and the ADT; if that's the case then this problem can be solved via the AndroidManifest.xml file by adding the following to your <activity> tag for the activity that is invoking the Soft Keyboard:
<activity android:windowSoftInputMode="adjustNothing"
//other flags
/>
Actually this seems to not be the case. The API document I was reading was actually for Honeycomb, this flag isn't in 2.2. Sorry. All of my work recently has been on tablets and I forgot which version of the SDK I had bookmarked for reading since I've been prepping lately.
You might have to enable this script to avoid your app scrolling when your text input field gets focus :)
function preventBehavior(e)
{
e.preventDefault();
};document.addEventListener("touchmove", preventBehavior, false);
this behaviour on android 2.2 append when there is one element in page with a "transform" css attribute (like transform: translate3d(0px, 0px, 0px); )
removing those declarations fixed the problem for me.
(overflow:hidden also but you can't scroll the app anymore)
PS: overridding the declarations does not work unfortunatly