Android 2.2 Web View windows moves up when Virtual Keyboard appears - javascript

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

Related

how to create an slideshow without transition and inline styles adding to html? is it possible?

UPDATE: I have updated this post more than 5 times but still couldn't
get appropriate answer , I'll appreciate if you could read my question
carefully and answer it <3
I want to create slideshow just like bwin's mobile version website. I started to analyse how it works. but it works weird, if you use inspect element in google chrome or any browsers you can see the slideshow works without any inline styles added dynamically.
in every slideshows that I've seen before there was inline styles that they added to HTML tags in a specific time interval. in this case I can't see any inline styles that add to tags but it works like a charm. I checked the CSS files for the keyframe property and there was nothing and of curse they don't use transition too.
for more information is good to say they use angular as their front-end framework.
Note: please open the mobile version of the website in computer to see what is going on !
The address is : https://sports.m.bwin.com/en/sports
I'll be appreciated if you tell how does the bwin's slideshow works? and how to create this slideshow?
thanks a lot <3
UPDATE: Special thanks to Sergiu Paraschiv that he figured out google
chrome's dev tools doesn't show inline changes for translateX property
of DOM Shadows , he tested the bwin's mobile version with his Safari
in his Mac machine and he captured screenshot "imgur.com/a/Php4EhB" ,
so you can see the inline changes in Safari browser of Mac OS . Why
google chrome or firefox doesn't show the changes of inline translateX
property of the DOM Shadows?

Javascript/Mobile - onClick() wont work on mobile devices

We have a website that when you click on the text it reads to you what is displayed. This works 100% for computers but on mobile devices it will not play the audio.
I have looked around the web but everything is pointing to Jquery using touchstart. We tried doing this but it then breaks on computers.
Anyone run into issues like this? If so, how did you fix it?
I think this was an issue with older versions of react. I haven't had the problem recently. In the past, I solved it by adding cursor: pointer; to the CSS of the element. It had something to do with events not firing on elements that aren't usually 'clickable'.

Firefox touch scrolling not working

I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.

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.

Foundation 5 and contenteditable (mobile) not working

I am working on a website that has the functionality html5 "contenteditable" instead of input fields.
Using a mobile device you can not change the fields "contenteditable", to be precise it does not appear the virtual keyboard. I tried to understand what was the cause of this problem until I commented out the line of code that calls foundation-min.js and the fields have started to work.
What is the problem?
It seems from this: https://github.com/zurb/foundation/issues/3607
You need to disable the FastClick library and that should fix the issue.

Categories

Resources