I have a responsive web page that I want to reorder with jquery when going from one size to a smaller one. Everything is great except when I reorder an element (a DIV, for example) that has an input in it, like the search form:
$( '#searchfrm' ).insertAfter( '#bodyfrm' );
If I do this, when I click the input, the keyboard appears for a second and then disappears. This happens only on Android, on iPhone it works perfectly.
If I comment the code line, the input works perfectly on Android but I don't want the search form on top, but on the bottom of the page on the responsive design.
How do I prevent this from happening? Thanks!
I found that the problem was when reordering the elements. The reordering process was being done all the time so, in Android, when the keyboard appeared, jquery was reordering again, making the keyboard disappear. The solution was adding a variable in jquery to prevent the reordering process all the time and do it only once when going from 1024 to 700, for example.
I had a similar issue but found it was due to the $(window).on("resize",function(){...}); and not the .insertAfter script used to reposition the element.
If the element you reposition has an input field and that input field is in focus ~ the default behavior of Android opening the keyboard actually resizes the browser causing the function to loop. - REFERENCE: (dealing-androids-constant-browser-resizing). Changing the function to trigger on (load) as opposed to (resize) did the trick for me. $(window).on("load",function(){...});
Related
I have an unusual problem with my Android app. Whenever I focus an input field on a webpage, the soft keyboard appears and immediately disappears.
The app integrates Crosswalk for the browser functionality, though I want to say this used to happen when I used WebView previously.
This is a screen recording of the problem:
It seems to be pushing up or resizing the HTML to accommodate the soft keyboard, but failing for some reason.
Does anyone know why this happens and more importantly, know how to fix it?
EDIT: I've found that if I add android:windowSoftInputMode="adjustPan" to my AndroidManifest.xml file, the problem does not happen. Setting it to "adjustResize" makes it always happen.
Would still love some help if anyone knows the answer :)
The solution to this is a workaround to an Android quirk (of which there are many). From what I've read, this does not happen on iOS, but I have not tested it to confirm.
The problem is when the soft keyboard appears, it triggers a window resize. When you are working with a responsive website, as I am, you are likely to have code that handles resizing. When the keyboard appears, a window resize occurs and the keyboard disappears due to custom resize code.
Solution 1:
The solution is to rewrite resize events to be orientationchange events. While this isn't an ideal situation, if an app is the only target, then it should be fine.
To clarify, change from (using jQuery):
$(window).resize (function ()
{
// Code on resize
});
Change to (using jQuery):
$(window).bind ('orientationchange', function ()
{
// Code on screen rotation
});
I am not sure of the browser support for orientationchange since it's not available on http://caniuse.com, but I can say that it does work with the current version of Crosswalk (19.49.514.4).
Solution 2:
An alternative solution suggested by chrisdew at https://stackoverflow.com/a/9229672/3509051 suggests "adding a listener to the input's focus event which disables reacting to resize events for 0.5s.". This should also work if you are happy to have a 0.5s delay whenever an input is focused.
I'm using PhoneGap and JQueryMobile to create a mobile app that I want to deploy to both iOS and Android. The app is simple, and just consists of 3 bars: A header/search bar, a second bar (displays the results of the search), and the remaining screen is a that the user can write in.
Because I want to code my layout to look the same for the greatest # of devices, I've written my CSS for the layout of the app in %'s. Header is 6%, Second bar is 14%, ect. This appears to work decently for the devices I've tested for so far. I ran into an issue where the Android keyboard would squish the viewport height and therefore my layout. So I set the keyboard to resizePan and that solved the squishing issue. However now the bottom of the is not visible until the user closes the keyboard.
In the questions I've seen about that issue, the solution is to swap to "adjustResize" so that the user can scroll when the keyboard is active. I can't do this, because I want to avoid the layout-squish issue.
Is there a way to fix this without having to re-write the CSS? If I HAVE to re-write the CSS, how should I code the layout to look consistent on multiple devices? Do I have to use an extensive list of media queries for all possible devices?
Note: This isn't an issue for ios, because the soft-input keyobard overlays the textarea (like adjustPan) but still allows the user to scroll down and up to parts of the document outside of the view or covered by the keyboard.
Of course there were many similar questions to my problem but none of them worked for me. So,it forced me to open a new question.
So, I am developing an Hybrid mobile app where the main screen contains two independent section with their own input labels. So,when ever the input field got focused the native Android SoftKeyboard pushing the contents of lower section towards up, which eventually decreases the screen size.
Here, I don't want the keyboard to push the content up. The keyboard should be shown but it should be over lay on the section.
I've tried these things already:
android:windowSoftInputMode="adjustNothing", android:windowSoftInputMode="adjustPan" and some jquery code but in vain.
I am not sure it is possible.
However you can work around this, by specifying your element's height with viewport width vw measures.
For example:
div {
height: 40vw;
}
This won't work on landscape however.
You can also hide elements when the keyboard is opened (so instead of them being pushed up, they are just not seen) by assigning the class hide-on-keyboard-open
Like so:
<div class="button hide-on-keyboard-open"></div>
I have an issue on my phone running Android 4.0.4.
I have an iframe with a text field and a couple of dropdowns, but the iframe is too wide to fit in the phone window when in portrait mode, so I get a horizontal scroll bar so I can scroll to see all of the fields.
The problem is, if I scroll the iframe to the right I can no longer select the text box or the dropdowns.
It looks like the device doesn't realise the iframe has been scrolled to the right, so for example, when the iframe first renders, the content is positioned left aligned. At this moment, one of the dropdowns is visible at the far right of the iframe. If I scroll the iframe all the way to the right and tap the screen where the dropdown used to be, I get the selection screen for the drop down even though the area of the screen I actually clicked had no element on it at all.
If I tap the screen where the dropdown actually is, I get no response at all.
I have a test page here:
http://snow.x10.mx/damian/page.html
Everything works fine on Firefox on the desktop, so it looks like it may be just an Android bug.
Can anybody suggest a workaround for it (other than making sure the iframe isn't wider than the screen) because I can't see an Android fix coming any time soon!
If anyone has an iPhone they can test it with, can you let me know if you have the same problem?
I've run into the same issue with Android 4.0.4
The same thing happens with vertical scrolling, and applies to input fields, links... Anything that should react to a touch/click event. If the element is visible before scrolling the position where it was is still reacting to the touch event after scrolling. And if it's not visible before scrolling there is nothing you can do to interact with that element.
I'm not sure what's causing this, but using a scrollbar plugin ( jScrollPane ) has solved it for me.
Good luck!
I have an Android app using PhoneGap 1.6 and Sencha Touch 1.1.1. One view has a text input field which behaves oddly in Android: it duplicates itself and it is very difficult to remove focus.
I have determined that it is a WebTextView coming up over top of the "real" input field. The problem I am having with this is that blurring the text field with screen taps is extremely difficult, and if you scroll the parent container, the WebTextView does not scroll with it, so you can see both at the same time.
The only way to remove focus on the element is to tap furiously all over parts of the screen, much like triggering the frustration detector from Mavis Beacon.
My actual question is: how can I turn off this functionality completely, or at least work around it? It is not reasonable to expect the user to do anything other than single-tap outside of the box, or press the Back button on the device to stop input in the text field. As it is, pressing Back simply stows the soft keyboard and does not give up focus.
These are browser bugs, triggered by some CSS-flags.
To explain the bug:
The device creates some kind of "screenshot" from the web-sites content. All transformations and transitions are made on top of the "screenshots" from the actual page.
If you have input elements, there will be some kind of proxy elements rendered on top of the "screenshot". Sometimes the are these proxy-elements at the wrong position.
This happens, if you trigger the website to be hardware-accelerted. You have to drop some CSS-definitions:
transform(), translate(), transform3d(), translate3d().
The Bad news are:
You cannot solve this problem, because it a bug within the browser.
I have some different android devices, all have different problems, one fix will break another device.
I think the bug will never be solved, because noone cares about the embedded browser since android 4.1 and the chrome.
If you can disble hardware accelertion, this may help.
The good news are:
There are rumors about an embeddable chrome-webview.
I started to write some blogposts about "the new IE":
http://christian-kuetbach.de/blog/post/14