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
Related
On iOS, touching the input field would trigger the soft-keyboard and auto scroll to the current in-focus element.
However, on Android browsers (Native or Chrome), touching the input field would trigger the soft-keyboard, but it scrolls to a wrong position so that the input is covered by the keyboard.
DEMO here
I know that if I take out the overflow:scroll from the parent class it works well. But how to solve this if I need to keep the overflow ?
If I use position:fixed for a header, it stays fixed however on android there is a bug where if you have any fixed position divs present when you focus an input element, the page does crazy scrolling jumping about all over the place when you type.
so, I thought the solution was something like iscroll, so i can keep everything to position: absolute instead.
However, even the new iscroll5 doesnt allow android to use any SELECT inputs within an iscroll, it just doesnt focus them. On top of this, any input elements get the input overlay appearing but not over the top of the input, another bug of android..
Is there any way to get fixed header/ other elements that works on android? is there a different script to iscroll which can use form elements without hassle?
in IScroll 5 you can add the parameter preventDefaultException for enabling click of any input and for this example any element having the class .placeholder, .label. Example :
this.scroll = new IScroll('#wrapper',
{
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|LABEL|SPAN)$/,
className:/^(placeholder|label)$/
}
});
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'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();
});
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 :)