Cordova disable shrink view on input focus - javascript

I'm creating an app in Cordova/Phonegap (v6.5.0).
Platforms installed:
- IOS (problem is present)
- Android (problem is present)
- Browser (problem is not present)
Now I have a known problem, but no adequate fix for it.
When I focus on a field on my page, the whole page tries to fit on the view the user has (between the top bar and the virtual keyboard). This makes my fields overlapping each other and making the app ugly.
What I would like to have is that my page stays the same, so not adapting to the keyboard.
Do any of you have a solution for this? I have this on all my pages.
Thanks in advance
EDIT:
I found the answer by myself on the following link: Soft-keyboard makes the cordova-view shrink

The cross platform (iOS and Android) solution to this problem is to install the following plugin:
cordova plugin add ionic-plugin-keyboard --save
And add the following code to your deviceready handler:
document.addEventListener('deviceready', function(){
if (window.cordova && cordova.plugins && cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.disableScroll(true);
}
});
Note: Ignore the fact it's an iconic plugin, it works fine with regular cordova projects

Related

Phonegap iOS app not allowing inputs on forms in an iframe

iOS 9.3.2
Phonegap Build 6.1
We're loading an iFrame from another vendor into our iOS app. The form loads perfectly fine. We tap on the form field and it does not allow any inputs. This occurs on multiple iPhones. The same app works on mobile safari and chrome. Phonegap is when these issues begin.
We've made changes to the CSS for
-webkit-user-select: none;
now everything is
input { -webkit-user-select: text; }
We've disabled faskclick.js and made the changes suggested, still the same thing.
Not sure what could be causing the problem. Any guidance would be appreciated.
According to Shazron and risingj at Adobe, this is likely an Apple rendering issue in UIWebView. They have no control regarding UIWebView's bugs, so this is something everyone should take into consideration. We've downgrade to cordova 3.7.0 and use "cordova-plugin-wkwebview", it works as intended.

Ionic 1 modal renders broken

I am having a problem when rendering a modal using $ionicModal using Ionic 1.
The modal opens, but it appears broken as in the image.
I don't have a clue of what may be the cause of the problem. The app was running on Android 6.0, Moto G, third generation. Is it associated to crosswalk plugin?
It may be because the Ionic1 has been upgraded.
Try to do the same using Ionic 2 Ionic#beta. That might help.
When you upgrade your code to Ionic 2, you might have to edit some of your present code. Just take care.
If you still have problem, then start pondering more into the code.

Change orientation on Phonegap JQuery mobile

Hi i write simple app using jqm and phonegap, and i have some problem with change orientation. I need to change orientation on one page. I can change values "Supported interface orientations" but it work on all pages, may be exist way to change orientation on one page ?
You can use this plugin.
https://github.com/champierre/pg-plugin-screen-orientation
To lock the screen to Landscape:
navigator.screenOrientation.set('landscape');
To lock the screen to Portrait:
navigator.screenOrientation.set('portrait');
To unlock:
navigator.screenOrientation.set('fullSensor');
Here is an updated plugin which works perfectly for me: https://github.com/apache/cordova-plugin-screen-orientation
To use it (for cordova version > 4) execute this command:
cordova plugin add cordova-plugin-screen-orientation
Or for phonegap:
phonegap plugin add cordova-plugin-screen-orientation
Then use it like this:
screen.lockOrientation('portrait')
screen.lockOrientation('landscape')
Works for Android & iOS.

Programmatically add event in iPhone/Android Calendar with PhoneGap/jQuery Mobile?

How can I create a calendar event from a JavaScript / jQuery Mobile / PhoneGap app in iOS/Android?
Are there any, e.g., PhoneGap plugins? Didn't see any in the official repository.
For iOS, the Event Kit framework (iOS 4.0+) seems to be able to add an event.
Per the comments below, it is now possible to create an iCal file for iOS and a vcs file for Android. It will require browser/device sniffing, or give the user the choice, but it should at least be possible.
I realize it's old question but there is plugin for this now. It has its cons, but works. At the moment of writing it supports the following functionality:
iOS supports: create (silently), update (silently) and delete (silently) event
Android >= 4: create (interactively and silently), update (not supported), delete (silently) event
Android < 4: create (interactively), update (not supported), delete (not supported) event
Here follows code example:
var startDate = new Date(2014,2,15,18,30,0,0,0);
var endDate = new Date(2014,2,15,19,30,0,0,0);
var title = "My nice event";
var newTitle = "My new nice event";
var location = "Home";
var notes = "Some notes about this event.";
var success = function(message) {
alert("Success: " + JSON.stringify(message));
};
var error = function(message) {
alert("Error: " + message);
};
window.plugins.calendar.createEvent(title,location,notes,startDate,endDate,success,error);
window.plugins.calendar.modifyEvent(title,location,notes,startDate,endDate,newTitle,location,notes,startDate,endDate,success,error);
window.plugins.calendar.deleteEvent(newTitle,location,notes,startDate,endDate,success,error);
Currently the PhoneGap development roadmap does not include calendar support. However, there are many requests for it. See this post called "Calendar plugin following W3C calendar API" which points to the PhoneGap-Calendar-Plugin project which includes some initial calendar support for Android.
Adding an event to the iOS calendar is very simple with the latest API.
However, you need to create your own plugin in order to do it.
since this is platform specific, come time will pass before there is an official PhoneGap plugin.
I found plugins for Android and iOS but they do not have the same JavaScript API so you have to write different code for both systems or add another layer. Also they are not up to date and will need fixes to run with Cordova 2.2.0. To make things worse documentation is kind of short:
Android
Dcheng's Android Plugin is able to create, remove and search calender events but is totally outdated and will not work as it is. With Android 4.0 there is a Calendar Provider that makes things easier but still I did not find a good plugin. jbajor can only add events and twistandshout only search events.
iOS
Felixactv8's iOS Plugin is able to create, remove and search calender events. Notice that in iOS there is no event id, so searching your events will be fun. The author explains how to add the two needed frameworks in xcode:
the iphone calendar uses the 2 frameworks, EventKit.framework and
EventKitUI.framework.
if you click on the xcode icon, you should see the project icon and
the target icon. click on the target icon, then click build phases.
Click the dropdown for "Link Binary with libraries. Click the plus
sign at the bottom of the window, then search for both frameworks. Add
both of those frameworks, rebuild the project and run it.

Android 2.2 Web View windows moves up when Virtual Keyboard appears

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

Categories

Resources