I have a simple form with one select input type that works fine on all desktop browsers as well as mobile Safari. However, on both my Android devices (Samsung Droid and Prevail), the select input will not respond. I'm expecting it to spawn a picker. Has anyone had a similar experience? Any advice? Thanks.
I had a similar problem and solved it with the following meta tag:
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
And I noticed that, in my case, when a parent element was hidden (and displayed again) the select element behaves 'disabled'. There is a bug in android =< 2.2 when you change the style, the dom is not re-rendered. You can force to re-render the dom by adding (or changing) a 'fake' attribute to force dom re-rendering. e.g:
myPreviousHiddenEl.setAttribute('forceRePaint','yes');
I was having this problem and I think it had something to do with overlapping like you said. To fix it I added the following CSS to the tag like this:
<select style="position:relative">
That got the job done. :)
Just encountered the same issue.
I'm using Bootstrap and one of the <div>'s in the lower section had col-sm-12, but no rule for xs. This was causing it to invisibly cover up all of the above form input elements in mobile. Switching col-sm-12 to col-xs-12 fixed the issue.
Related
I got a weird problem with bootstrap 3 and the glyphicons!
The problem appears on my android mobile phone with Chrome (latest).
Problem description: If the font-face-statement exists in the bootstrap.css to load the glyphicon font file(s), the layout of the page gets a little bit broken.
On a windows phone, it's fine. It's fine # Firefox on a Desktop machine too and also in Chrome Desktop.
If I load the page the first time, the layout is OK! If i reload the page or change the page: The weird problem appears and keep! (-> Cache?)
E.g., screenshots from Android Mobile Chrome (latest):
Button group vertical with glypihcons. Icons are moved to the right. (Padding problem?)
Buttons with text # footer. (Padding problem at right side?)
Label for an input field. (It just breaks)
A self styled Checkbox + Label after it. (Unwanted new line break after the checkbox because the parent container is a lil' bit too small (width)...)
I don't know whats going on! If I remove the font-family for the Glyphicon Icons from bootstrap.css, everything is and keeps okay (insteat the missing glyphicon icons off course). If I let the font-face statement in the file, the problem occurs # android mobile phone.
Does someone already have had this problemand how can I fix this and what is the problem?
Fixed it for my self. It don't know what Chrome did, but clearing all the Chrome App Cache worked for me. The Problem was App related.
Im using Ratchet Framework for andriod app development.
I have some scrolling problems in some android phones and also in bluestack.
when scrolled, a toomany blank spaces occurs and it affects the smooth scrolling. also affects the forms in the page. attached the image related
scrolling on some other devices is good , No extra space.
1) make sure you are using the meta tags provided by ratchet.
2) make sure you are inserting the bar-tab navigation at the top right after the body
From the ratchet getting started guide:
1. Fixed bars come first
All fixed bars (.bar) should always be the first thing in the of the page. This is really important!
2. Everything else goes in .content
Anything that's not a .bar should be put in a div with the class .content. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.
3. Don't forget your meta tags
They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.
If that doesn't help post some code and let us take a look at it
i developed an android app by using html5 and phonegap (cordova 2.7.0); it's an application for image search, use the google API.
Returns a list of images that start with a tap.
It works perfectly on almost all devices, but on small screens with Android 2.3.x, scrolling (or click on image) does not work.
Any suggestions?
Thanks in advance.
You have run into an android bug. Overflowing DIVs inside BODY tag wont allow you to scroll. Same bug was there in iPhone (iOS < 5), but there atleast you could use two fingers and scroll.
However there are workarounds for it. You can use third party libraries such as iScroll, touchScroll ...
iScroll will disable your inputs for the div which you have applied scroll to. If its a simple paragraph use iScroll.
Reference
While 2-Stroker's answer is the correct one here is a quick and dirty solution, add a few <br> tags at the end. Worked for me ;)
If you don't want to go through the trouble of adding iScroll you can also use:
// Workaround for problematic scrolling behaviour on Android
// we can't fix this in css directly as it breaks iOS and the
// platform selector in css is unreliable
if ( device.platform === 'Android' ) {
$('.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active ').css("position", "initial");
}
I have a super basic HTML select form field -
<select>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
But for some reason when i tap on them nothing happens. This is happening in a WebView on Android 2.2.2
strange thing is that SOMETIMES they do work...
Do you have user-scalable=0; in your meta tag? If so, try user-scalable=yes;
This seems to be an infamous problem on Android 2.x, according to the jquery mobile team this particular behaviour is caused as follows:
A fixed element that contains an absolute positioned element, which itself contains an absolute positioned element, will cause select menus on the page to stop responding altogether.
The complete quirk seems best described here.
So most likely it's the encapsulation and styles of the other elements on your page causing this. A comfortable alternative around this would be to use some plugin to replace the native dropdown, so you wouldn't have to worry about and continously retest the drowdown functionality, for example the selectBox-Plugin in jq UI (now intel appframework)
Adding the class "needsclick" to the select fixed this issue for me on Android.
I have a very simple Android app that's just a WebView. Everything works fine (complex Javascript etc.). However, all of the HTML select controls seem to be disabled. They display with default values, but nothing happens when I click on them, and they don't get the orange highlight when I arrow through the controls.
Other inputs (text, radios, submit) work fine, so I don't think it's a focus issue.
Configuration:
Eclipse IDE
SDK Version 8 (2.2)
Testing in the Emulator
I had the same problem. My problem was fixed by changing overflow:hidden to overflow:visible on a containing element.
I had the same problem.
In my case I had elements on the page that had the style position:fixed;
Although the bounding boxes of the select element and the fixed positioned elements did NOT overlap, I wasn't able to open the select dialog.
By removing a couple of fixed positioned elements I got it to work. Seems to be a bug in webview.
Same Problem, fixed it by setting position:relative on the li's containing the select fields
2 years after the fact, but in case someone pulls this up again:
If it's android 2.3, put in every empty child element of a fixed position parent. I found that this fixed the problem for me.