I'm a bit tired looking for a solution for overlapping input field by soft keyboard on Android. My problem is very similiar to this one: Soft Keyboard Overlapping with EditText Field although in this case it occurs in HTML5, not native application.
More precisely: when the input field is fully covered by keyboard, a whole page is scrolled and this field become visible - that's OK. But if this input was on the edge of visible area (after keyboard appears), my soft keyboard overlaps it and page won't scroll at all. The page will be scrolled just after typing a first sign.
My customer doesn't like this behaviour... It occurs for sure on Galaxy Tab 10" - Android 4.0.3, Lenovo Tablet - Android 3.1.
I have tried setting input's height, using box-sizing:border-box;, -webkit-appearance: textfield;, -webkit-user-select: text;, -webkit-writing-mode: horizontal-tb;, -webkit-rtl-ordering: logical; and few more, but nothing worked.
Have you got any idea? I would prefer CSS solutions, javascript page scrolling is not an answer for me in this case (customer requirements).
Maybe it's just an Android Web Browser bug with no workarounds or some specific problem due to some of input's parents' style (I've already tried removing all position: absolute properties)?
All suggestions are welcome.
I had this annoying issue, related to my css framework - mobile-angular-ui.
So it's known bug on internet, and I spent hours on searching for fix on web,but unfortunately none of proposed solutions solved my particular case.
At last I did some testing, and it turned out that this behaviour is caused by framework I used.
(I did report it to mobile-angular-ui authors, but I didn't get response.)
You probably want to do few tests, as I did, to find out if this issue is related to architecture of your app, really. Comment out all the css code and start from blank, pure html page with forms on it.
If all's fine (form should scroll up to show in visible part of view, above of soft keyboard) when your css is commented out/switched off, your issue lies in css, just like in my case.
For those who use mobile-angular-ui in their apps, and get into this issue, this piece of code did the job for me:
html {
overflow: auto;
}
body {
height:auto;
overflow: auto;
}
.scrollable {
position:inherit;
}
The rest depends on your particular case.
I hope this helps.
The simplest way to solve this android nasty (and now in ios7 too) is to use the inputs focus and blur events. If you are not using the footer tag just replace it with the class of your footer element.
In jQuery:
$("input").focus(function(){
$('footer').hide();
});
$("input").blur(function(){
$('footer').show();
});
Related
I just started creating a mobile application with Maqetta for phonegap on Android and WindowsPhone. The application includes some webpages with text-input so I need the soft-keyboard to work.
My problem is that the keyboard reacts totally different on the two operating systems. On windows phone, when I click a text box, the Keyboard shows up and covers all the things that are located underneath it. To reach the other text boxes, I can still scroll in the field that shows my website and select it. In addition, which is quite important for me, the website is not compressed. That is exactly what I want.
On Android, things are a little more complicated. After doing a lot of research I stumbled upon these guys:
android:windowSoftInputMode="adjustResize" and
android:windowSoftInputMode="adjustPan"
I have tried both, but both do not fit my needs.
adjustRezise compresses my website (because the website is height:100%) and adjustPan covers everything underneath it without any possibility to reach it (except for closing the keyboard and reopening it for every textbox // and having to type without seeing what you type).
I have also heard about ScrollViews and stuff like that, but as I am new to this topic i have no clue what the heck that is and how to use it, because i am focusing on the html and css part of the app, so if you have any tips there please keep in mind that it might take some information for me to understand. ;)
I would be very happy if one of you could help me with this problem. I hope there is a solution.
Setting height: 150% did not work for me. It made page scrollable even if there is not enough content to scroll. Following solution (mixed of CSS & Javascript) worked for:
In CSS: I kept height of app/HTML: 100%; and overflow-y: auto;
#container {
height: 100%;
overflow-y: auto;
}
Detect focused textarea or input, then wait a while until keyboard is shown and finally scroll the page to reach focused input.
$("#textarea").focus(function(e) {
var container = $('#container'),
scrollTo = $('#textarea');
setTimeout((function() {
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});
}), 500);
});
When keyboard is hidden the text-area keeps focused, so if it's clicked again the keyboard will show and the container needs to scroll again to show the input
$("#textarea").click(function(e) {
e.stopPropagation();
var container = $('#container'), //container element to be scrolled, contains input
scrollTo = $('#textarea');
setTimeout((function() {
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});
}), 500);
});
I am working on a responsive website, which has a different stylesheet for either mobile or desktop. Everything looks nice and works great, until text inputs are interacted with on mobile. They show up as they should. But once clicked (ehrm.. touched), I found that the browser in Android starts scrolling like crazy, and the same happens when typing. The text is entered in the input, though, and the soft keyboard/focus on the input is not lost.
My project can be found over here: http://www.gortzfruit.nl/new/
The problem is that I have been searching for a solution for a while now, and found similar issues of which the solutions were not working out for me. Some topics -and solutions- I have been looking into were:
https://github.com/scottjehl/Device-Bugs/issues/3
-Here it is suggested that the problem lies within positioned elements. Especially absolute within fixed positioned elements. This is recurring in my design, but once removed it did not solve the problem.
Android Browser textarea scrolls all over the place, is unusable
-This one suggests that the problem is with the css-properties -webkit-transform: translate3d(0, 0, 0); and -webkit-backface-visibility: hidden;. I did not include these by myself, but I thought a Google Maps API I included might use these. I found that they don't use it either, after analyzing the markup Google Maps API produces.
How can I prevent wild scrolling when a fixed position text input form field gains focus? -This one is focused on trying to cope with the problem. Setting the body to overflow:hidden; was suggested to block scrolling while being focused, but it did not work for me.
disable scrolling on input focus in javascript
-Here it is suggested that returning false on keydown might solve the problem, which I tried with no success. This one block my text from being actually entered in the input.
I know this is related to the bug in Android which causes this weird scrolling. But I don't know anymore how to cope with this. For me it does not matter whether I find out how to avoid the bug or whether I find a hack to make the bug unnoticable. I just want to get rid of the weird scrolling behavior while typing and focussing/blurring on textboxes.
Thanks in advance,
Jeroen
Remove the meta viewport tag from your markup and add this immediately after the opening body tag:
<script type="text/javascript">
<!--
(function() {
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
var content = 'initial-scale=';
content += 1 / window.devicePixelRatio;
content += ',user-scalable=no';
meta.setAttribute('content', content);
document.getElementsByTagName('head')[0].appendChild(meta);
})();
//-->
</script>
This will give you the best experience on mobile (amazing image rendering too!). I noticed on my device (which isn't Android) I had some weird scrolling/zooming issues and this eliminates that. Let me know if it works :)
In iOS, even for textareas contained in a div with position: fixed, when a textarea has focus, the OS ensures that it is visible (which sometimes means sliding the entire browser window up) so that the textarea isn't hidden by the keyboard.
In Android browsers (I've tested the stock browser in both 2.3 and 4.0 as well as Chrome in 4.0), this does not happen. The textarea gets covered by the keyboard, and the user can't see what she's typing.
As a temporary workaround for Android only, I set position: fixed on textarea:focus and move it to the top of the screen so that it's guaranteed to be visible.
Are there any more elegant solutions that maintain the integrity of my layout?
I made a little example in jsfiddle. View in an Android browser to see what I mean: http://fiddle.jshell.net/5cvj5/show/light/
What I ended up doing, and what I found that Facebook does to overcome the same challenge, was to add a spacer block element below the textarea when it receives focus and then to scroll to the bottom of the view, like so:
var android_spacer = $('<div/>', {
'class' : 'android_spacer'
}).css({
'width' : '100%',
'height' : '200px'
}).appendTo($('#parent_view'));
$('#the_textarea').on('focus', function() {
$(this).after(android_spacer);
});
$('#the_textarea').on('blur', function() {
$('.android_spacer').remove();
});
Note that there's only ever one spacer onscreen at a time.
Simply make position of your footer to absolute and set bottom to 0, this would handle it
I have a problem as regards the combination of jQuery mobile, phonegap and android regarding the toolbars. To be more precise I would like both my header and footer to remain stable (data-position="fixed") after my input on a text area.
I also include the attribute data-tap-toggle="false" on both header and footer, but after I write something on the text area and return on the page the footer and the header are not "fixed" anymore, and I have to touch the screen again in order to be visible and fixed again.
Any advice?
Thank you in advance.
The best solution (works for me perfectly) is:
https://github.com/watusi/jquery-mobile-iscrollview
It is a combination of jquery mobile with iscroll.
Basically, it does all the nasty work joining the 2 mentioned libraries.
I have the exact same problem on iOS. After several hours, and trying several different things, I went for iScroll. If there was any answer other than this, I would happy to hear.
I had the same issue on Android 4.0.3 . I had a list with a search box. As soon as I tap the search box for input, the header and footer lost their fixed position. I got a very simple fix work for me.
$('input[data-type=search]').live("focus", function() {
$("[data-role=header]").css('position','fixed');
$("[data-role=footer]").css('position','fixed');
});
Hope it works !
When user selects input field, keyboard comes up but the input field text is right on top of the virtual keyboard.
Problem gets worse when it is a textarea because keyboard wants to focus on the first line only not the entire textarea box.
In my AndroidManifest.xml I tried changing android:windowSoftInputMode='adjustPan' but did not help.
EDIT -------------------
Using Rhomobile, Jquery Mobile and iScroll
Form is in a data-role="footer" data-theme="b" data-position="inline" div tag to make it stick to the bottom of the view.
<input class="imInput>" name="im[the_message]" type="text" maxlength="100"/>
No matter what I do the keyboard lines up with the bottom of the text. I have tried making line-height larger, padding, etc. nothing works.
How Can I make the keyboard line-up to the bottom of the field?
I would recommend this article about the various input methods to see what would work best for your app. Otherwise it is hard to say what is going on without understanding your app better with code, etc. If not that, than this post seems to be somewhat similar to the problem that you are having.