Android 4 duplicates inputs when the user focuses them. This duplicate input sits on top of the real input, and it functions pretty normal. This is odd, but ok, it seems to work.
However, if those inputs reside within an iframe, the duplicated input is no longer rendered on top of the original input, and instead it's rendered in a different spot.
Screenshot (duplicated input contains blue border, top left corner):
As far as I can tell, it's actually rendering this duplicated input as if the parent HTML document didn't exist at all. For example, If you add some margin-top inside of your iframe, the duplicate input takes that into account.
I've created a live example for your debugging enjoyment:
http://ghettocooler.net/stuff/code/android-ics-iframe/
Any ideas? Thanks!
Just spent a few hours on this. The thread above by davethegr8 now has the solution. All's needed to fix the problem I had was:
input {
-webkit-user-modify: read-write-plaintext-only;
}
Tested this on a HTC One X default browser and it worked fine.
Related
I’ve used Fontastic.me to create an iconfont. It works great except in the native browser of Android 4.2.2 and 4.3 (eg: modern Samsung tablets).
In these browsers, the characters of the entire font have no width. This occurs with every font made with Fontastic.me (even the fonts it supplies itself). This is a major problem when centering the icons (horizontally).
I've set up a webpage to test it: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/icons-reference.html. The pink color shows the width of the character.
The following screenshot compares the normal behaviour with the AndroidBrowser-behaviour :
http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/fontastic.png
I’m sure it’s because of the Fontastic, because when i use Icomoon as fontgenerator, the problem doesn’t occur. I've also notified the owner but he says he can't look into it because he doesn't now how to install an Android Emulator on his Mac.
Does anyone has a clue to what's happening here? What causes the character-space to collapse?
I had the same problem yesterday. I resolved it with a little bit of a work around. Like you said, when you want to center the icon with text-align:center; it ends up more to the right. If you put it to the left, it aligns left as intended. So I made the speudo element exactly the same width as the icon and centered the speudo element with margin: 0 auto; In that case you can leave the text-align to the left.
I know it's not the perfect solution, but for now it works for me and maybe also for you.
I had the same problem and resolved it by using icomoon.
I'm trying to make a textField that accepts input. My problem is, that when a user taps a textField, the input field is maximized so that it covers half the background image (the keyboard covering the other half).
The picture below shows what the background image looks like before the user taps one of the five textFields (the grey bars).
The image below and to the left shows what currently happens when I tap a textField: the input field is enlarged and completely covers the background image. What I WANT to happen, however, is what I've tried to show below and to the right: the textField is focused and the user can start writing while the background is still visible.
The app works fine on my Samsung Galaxy tablet, but for some reason I have this issue on my Nexus 5 phone only. The phone has plenty of other apps where the example to the right is what happens, so I at least know that it's possible. How do you do it?
(Was unable to find a tag for the Nexus 5)
This is a common problem. See http://forums.coronalabs.com/topic/36320-keyboard-covers-my-textfield-when-placed-on-botton-of-the-screen/ for some ideas. Some devs create their own virtual kb, see eg https://developer.coronalabs.com/category/tags/keyboard for some libs to help with this.
This is the ExtractEditText UI; you just need to add a flag to disable it. On your EditText, set the attribute:
android:imeOptions="flagNoExtractUi"
I am building a web app with a cool looking search input. However when I click the input to start typing the input box gets highlighted with a blue border which is fine and it looks good, but in addition to this a white rectangle with an orange border appears over text input and it looks really bad.
I've tried several solutions to this and none of them work. (The CSS styling solutions changing alpha to 0 ect.) [But if you can get those to work on android 4.0 and/or higher then maybe I was doing it wrong and I'll try again]
Others have said that those solutions don't work on the newer Android OS's, which has been my experience as well. I'm personally running Android 4.0.4.
--- Replication of Problem ---
My Android Application & Native Android Browser ...
Chrome Browser for Android ... [ Works fine! ]
Since it works in Chrome then it must be possible to fix. I had thought Chrome was open source so I tried to find their source code so I could possibly find a solution. Source for Android Chrome is not available so it's not open source.
Have you tried setting the outline style to none on focus? You said you have tried css solutions but what have you tried?
It looks to me like an outline on focus which is pretty standard and can be overwritten with
outline: none;
box-shadow: none; /* If this is a box shadow - clear it with this */
Digging into google.com, they don't have a highlight on their input. What they do have is this:
-webkit-tap-highlight-color: rgba(0,0,0,0);
That clears the ugly orange, misshapen rectangle.
re: this fix:
input:focus { -webkit-user-modify: read-write-plaintext-only; }
I tested this on an s3 running 4.0.4 (we were having another problem related to input fields)
It causes an issue whereby text doesn't fill the fields properly when predictive text is turned on, i wouldn't recommend using it.
The issue with input not filling the fields properly (only the first character of every word you type gets entered after you press space!!) is also triggered by having input fields within an element with absolute positioning..
This was the cause of our original issue - probably worthy of another stack overflow post.
I don't think this is related to css/javascript.
I have already seen this behaviour when I enabled "Improve Web accessibility" in the device settings.
Try to go in your device general settings (not the browser's settings), Accessibility, and check if you have something like "Improve Web Accessibility" (Sorry, my device langage is french, I am not sure of the exact name in english).
When this option is checked, you will see big orange borders around editable / clickable content on web pages.
Don't know if someone already saw this bug. Note that this only happens with Android 4.x stock browser. It has been tested successfully with Chrome on Android 4, stock browser on previous versions, iOS, Blackberry OS6 & 7, Playbook, ...
Look at http://www.hello-gurus.com/labs/sandbox/plain-form.html
It works fine in the simulator (see http://cl.ly/image/1z3G1T2y2p2c) but goes totally wrong on the latest GalaxyTag (see http://cl.ly/image/1O123A3d0y3q)
Normal behavior should be text staying on the right. A padding on the left keeps the text to overlap with label. Input is 100% width so active zone is on the entire width.
That's how it works on every other browser, where Android stock one aligns it on the left only when focus! Plus, it makes the disappear even if the input has a transparent background :S
Even worse, sometimes its value get empty on blur x_X
This is getting me insane!
Any solution or anything i may give a try?
Thanks a lot!
I'd encountered a similar problem where a ghost field would appear on the Android devices on focussing an input field. This CSS for input fields solved my problem:
input[type='text'] { -webkit-user-modify: read-write-plaintext-only; }
Might be worthwhile giving this a try.
That is quite odd. Have you tried adjusting your css? It is possible to achieve the same desired layout but with a different approach.
Example:
for your labels:
remove -- position:absolute;
add -- display:inline-block;
change -- width:25%;
for your inputs:
change -- width:70%;
I setup something similar (static content) and it seems to be working for me.
I am developing a mobile site, so I'm using CSS to make things as liquid as possible.
I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:
iOS (Correct):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
Both screenshots taken from respective emulators.
Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.
So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?
Thanks for your time.
While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.
It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.
It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.
It can be 'fixed' by the workaround of applying a background-image to the element you want.
This can be done with a base64 encoded data url:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.
the div or any element above this could be the issue.
if you give fixed width to the p element, does it work well ?