I've got a web page with some text inputs. The Android browser (at least on Android 2.3.4 which is all I've got now) seems to overlay its own control over the input on the page on focus.
The problem is that the overlaid control is a white rectangle and it looks ugly. Is there a way to disable it, or style it somehow?
UPDATE:
Here is an example from the Android emulator:
The rounded corners and the background are lost. On the actual device, I don't even see a border around the control.
I should probably mention that I'm using jQuery Mobile. My test device is an HTC Evo 4G.
Related questions:
Input has different style on focus
Input-Elements in WebViews always have the same style if highlighted on HTC Devices
Finally, I solved this problem for Android 2.3 devices.
It is not possible to really remove the overlay, but it is possible to move the overlay outside the viewport.
The overlay tries to position itself to the same position as the input field.
It copies the width and the position offset which you assign with
position:relative
and
top:-10000px
But the overlay does not copy the position offsets which are assigned through
-webkit-transform: translate3d()
This causes several issues with JS libraries like iScroll.
But this also helps us to hide the overlay:
input[type="password"], input[type="text"]{
position:relative;
top:-10000px;
-webkit-transform: translate3d(0, 10000px, 0);
}
You place the input field outside the viewport. Overlay positions itself beside it. Now you use translate3d() for moving it to the old position.
We use this solution already in our mobile web framework "qooxdoo Mobile":
http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform
Following code will remove tap highlight - [Android 4.0.3]
input{
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:#3072af;
}
Not sure this is a working solution and answer, but my inputs started playing along on Android after commenting out these, which all created havoc on my Android (HTC2.3) text inputs and selects
/* really bad */
-webkit-backface-visibility: hidden;
/* your normal bad */
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
If you want to style default inputs, I'm using these:
/* native placeholder styling */
::-webkit-input-placeholder {
color:#555555;
}
:-moz-placeholder {
color:#555555;
}
.inField label {
color:#555555;
cursor: text;
}
After commenting out the first webkits, Android is working ok for me. I'm overriding plenty of other stuff, too though.
Also check out the screenshot below:
What I did with my inputs is create a listview, put all my inputs into list items and strip all input-JQM-CSS. This should give you a transparent input sitting on top of a listview item, which I think looks really good. You can also add labels to the inputs, my example is set up to work with the inField label plugin, so you have all these classes on board already, too.
The screenshot is from my Android HTC 2.3.5 and shows an input type="search". It's a listview search filter, which I stripped of most JQM-css. I have removed it from the listview further down, placed it into my form-list, added a label (can't see if active) and stripped all CSS, including icons.
Here is an example of how I'm doing my list-forms:
<ul data-role="listview" data-inset="true" class="inputList">
<li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c">
<div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
<label for="item">item</label>
<input type="text" name="item" id="item" />
</div></div>
</li>
<li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c">
<div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
<label for="item2">item2</label>
<input type="text" name="item2" id="item2" />
</div></div>
</li>
</ul>
CSS:
.inputList li div.ui-btn-inner {
background: none;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
}
.inputList label {
margin: 3px 0 0 !important;
}
// styling of text inputs!
.inputList input.ui-input-text, .inputList textarea.ui-input-text {
width: 93%;
margin-left: 1%;
padding: 0.6em 0;
text-indent: 80px; /* hard-coded - doesn't work on Android */
border-width: 0px;
background: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-border-radius:0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner {
padding: 0px !important;
}
// labels, from inField label plugin, but not active
.inField {
position:relative
}
.inField label {
line-height: 2.25em;
vertical-align: middle;
position:absolute;
left:8pt;
width: inherit !important;
}
I hope this is all CSS. If you are trying to set this up and it looks crummy, let me know.
Working like this looks very nice on my HTC 2.3.4 My CSS still needs some polishing. I need to decrease the inputs width and align: center, so the borders of the below list item stay visible.
Other than that this would be a nice solution to crummy Android inputs. Just strip all JQM-CSS and put a listview-li behind.
Here is my code:
input {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
I'm just taking a guess here, and you've probably already tried, but
-webkit-appearance: none;
may do the trick. I've not even got an android device, but on iphone that sorts out most input related styling problems as it strips out the default browser applied styling completely. Worth a shot anyway!
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline-style: none;
This will working fine in Android 4.0 but when you use this code for numeric Input field doesn't support bcoz of read-write-plaintext-only, i got this problem, please anyone suggest.
#czuendorf, May 13 at 13:53:
Worked for me too (also Android 4.0).
However... if you use an input with type="number" then the numeric keyboard does not pop-up anymore when you enter the field, but the regular keyboard is shown instead.
If you remove -webkit-user-modify, then the right keyboard is shown again, but the input element is shown with a border while it is being edited.
In my case the input overlay messed up the layout (moved some content down and right), but this does not happen anymore with this new css code.
I confirm the macnerd analysis of the czuendorf patch. These behaviors vary widely from one android version to another. I tested it on a real Htc device with android 4.0.3 and the outline disappeared (great!) but it opens some serious keyboard issues (I see that the single keypress is not shown in the field, and other strange behaviors...). In the emulator no keyboard issue occur. I've not found any solution for the real device. It's a shame!
Related
I am making a web app that is adapted/responsive to mobile. I have a toolbar that is positioned on the right side of the screen on my computer browser, and it is supposed to be placed fixed at the bottom of the screen on mobile. The strange thing is, when it is opened using an iPhone, the toolbar appears properly fixed at the bottom, but when I open the app on an Android device, such as my Samsung Galaxy S5, the toolbar is not appearing at all. Doing some testing, when I changed my styling to be relative instead of fixed, the toolbar is displayed in the same position in the middle of the screen on both iPhone and Android. What do you think the issue may be?
Here is the code:
<div class="col-sm-2">
<div class="sidebar-nav-right">
<div class="navbar navbar-default navbar-style" role="navigation">
<div class="nav">';
<a class="brand font-26 block brand-color">Tools</a>
<ul class="nav navbar-nav center">
<li><a data-toggle="modal" data-target="#newgroup-modal" class = "font-16">Create Group</a></li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
</div>
.sidebar-nav-right{
width: 100%;
position: fixed;
bottom: 0px;
border-top: 1px solid black;
}
This styling is inside a media query for smaller screen sizes and, as stated above, is adapting on a mobile device of one brand so I know there isn't a problem with the media query.
If add {left: 0} can't solve it, I guess maybe the parent node of .sidebar-nav-right have the transform; then the position origin has been reset.
this is a common problem on older Android browsers. Simply add -webkit-backface-visibility: hidden; to the fixed element.
There are two ways to fix this. See this article by Brad Frost for a list of Javascript solutions: http://bradfrost.com/blog/mobile/fixed-position/
Or try the above mentioned fix by Ben Frain: https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
See this CodePen by Ben Frain as well: http://codepen.io/benfrain/full/wckpb
I think #GoreWang's comment is spot on. You should try the following 2 things:
(1) With fixed position, sometimes not having a left property set causes the fixed element to not appear when the page loaded. Try adding the following:
.sidebar-nav-right {
left: 0;
}
(2) Add following code to your fixed element:
.sidebar-nav-right {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.(Known bug)
Any ideas how to remove the gap (on the screen) whitch appears during scrolling?
Header has position fixed and the gap appears only on Androd (tested on Android 4.0.4).
Part of the code responsible for the header:
HTML:
<div data-role="page" id="settings">
<div class="holo-action-bar">
<h1><span>Settings</span></h1>
</div>
<div class="content content-inner"></div>
</div>
CSS:
.holo-action-bar {
background-color: #333;
color: #fff;
display: block;
position: fixed;
top: 0; right: 0; left: 0;
width: 100%;
z-index: 1000;
}
Also you can see example at jquery mobile docs
UPDATE:
The problem doesn't occur on iOS (tested on iOS 5+)
I found the solution :
this is CSS problem on phonegap.
body {
<< height : 100%; don't use it >>
width: 100%;
margin:0;
padding:0;
top: -1px;
}
HardwareAccelaration : true
But delete your data-position="fixed"
make a class
<div id="header"><h1>Fixed header!</h1></div>
css:
#header{
position:fixed;
top:0;
}
EDIT *
Have you tried to check the margin on your inner object?
if its a p tag or h1 or so they have standard margin
if i check out the link you gave btw i dont like jquery mobile cause it gives more problems than it helps tbh.. but anyhow
it seems that it have a border on 1px or so do you have a link to your site?
I had the same issue and I solved it accidentally when I added this line in my activity.java:
mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
and android:hardwareAccelerated="true" in the manifest under the <application> tag. This tries to disable the software renderer in favor of the hardware one, and it worked on my 4.0.1 device.
If you are using webview with the fixed header and footer, you also might want to add the following too so the flashing animation over the header/footer disappears:
mWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);
I have got the 1px gap above the fixed header in an Android 4 pad, when using Intel App Framework 2 with Cordova 3.0.0. With the target Android version set to 4.3.
The problem was not there when I set the target Android version to 2.3.3 in previous projects.
At the end I found that when I set hardwareAccelerated="false" (in two places) in AndroidManifest.xml, the 1 px gap is gone.
I am having problems with the default style of Sencha (or Android not sure) for the text inputs and password fields, it works ok on iOS devices and on some android devices, but HTC and others put their awful default style (white background and grey border) which i can nohow change or hide. Because of that all the layout looks very awful....
see the image please.
Even the sample of Sencha Touch has the same problem.
see please the second image here.
Please if you have any suggestion what is the reason of it or how it is possible to hide i
would be very grateful!! here is all i have tried for that
input {
background: transparent !important;
border: 0 transparent !important;
-webkit-appearance: none;
}
input[type=text] {
background: transparent !important;
border: 0 transparent !important;
-webkit-appearance: none;
}
input:focus{
outline:none;
background: transparent !important;
border-color: transparent !important;
-webkit-focus-ring-color: transparent;
-webkit-appearance: none;
}
Thanks in advance
Andrei
What you're seeing is actually an Android "feature" that generates a native control on top of your styled input field.
If you try to move your field on focus you should see that the field is intact, try the following css rule to see the phenomena:
input:focus {
position: absolute;
left: -20px;
}
What you could do is try to set -webkit-user-modify: read-write-plaintext-only; which works on some phones (not sure about < 2.3), but can break some functionality. E.g. for a number field you still get a qwerty-keyboard instead of a number pad etc.
So try it out, hopefully it helps you and is suitable for your needs.
I developed an app in phonegap .
In input tag if i give type='text' it is works well .
but when i give input type='password' an another field is opening over to the current field.
how can i remove the above field..
my css is
.login-screen input.login {-webkit-border-radius:4px; width:90%; border:none; height:33px; -webkit-box-shadow: inset 0px 1px 2px 0px rgba(150, 150, 150, 0.9);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(150, 150, 150, 0.9); box-shadow: inset 0px 1px 2px 0px rgba(150, 150, 150, 0.9); padding-left:10px; margin-bottom:10px;}
html
<td align="center"><input type="text" id="vEmail" name="vEmail" title="Enter Email" value="" alt="" class="login" /></td>
</tr>
<tr>
<td align="center" ><input type="password" id="vPassword" name="vPassword" title="Enter Password" value="" alt="" class="login"/></td>
</tr>
i hope u can understand more by seeing this image!
if i remove the i scroll its working fine... how can i make it work even though i scroll is used
Here is an easier solution!
Change
<input type="password" />
to
<input type="text" class="password-field" />
In your CSS style sheet(s).
input.password-field {
-webkit-text-security: disc;
}
http://css-infos.net/property/-webkit-text-security
I am building a PhoneGap (cordova) ANdroid app and i spent about 18 hours so far trying to find a fix, destroying the iScroll instance kind of works if the password field is on the screen and not below the scrolling area... The webkit text security CSS property is a much better fix and i've done some research on this CSS property and it seems like all the Android versions run webkit so you should be good to go for all versions of Android with this fix!
I've been able to avoid this be using android:windowSoftInputMode="adjustNothing". +Sandy09 is right about the overlay + position. It seems the only good way to avoid this is to prevent android from moving the contents on IME start (adjustNothing), and also be preventing the contents inside the webview from moving at all. This also seems to break all CSS3 3d/3d transforms, even simple scales and transform-origin can break it.
There is worse news tho: at some point i had password boxes working fine, then due to CSS changes it came back permanently. At some point if the browser is slowed down enough (canvas) the Window seems to lose its ability to track the input box. For us, this led to SIGSEGVs every time we pressed the 7 (seven) key on the IME. This was on ALL android devices too, Regardless of version.
I gave up on all of this and just made my own KeyboardView. I'm a little happier now.
Check out this fiddle for the Login/Register page....
Use password field like that as given in the fiddle
http://jsfiddle.net/elijahmanor/3Rmdm/1/
This is not the problem with Phonegap.. this issue is also occurs in the webview..
in many devices like (samsung, sony, and emulator etc) the password field is overlay with the another field and rest of fields works fine.
coming to HTC this issue will rises in the all type of fields..
normally this overlay field covers exact to the bottom field and looks like only one field.
but
when we use the iscroll to apply scrolling property, the ovelay misplace as in the above fig.
solution:
onfocus on the field disable the iscroll and onblur refreshing the iscroll is an temporal solution which works fine.
but this is not right solutions in all cases.
waiting and trying for better solution..
My htmlcode:
...
<input placeholder="Username" type="text" name="username" id="username">
<input id="inputPwd" placeholder="Password" type="password" name="password">
...
With my CSS:
input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: #000000;
text-decoration: none;
border: 0px solid white;
outline: 0 none;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
border: 0px solid #000000;
outline: 0 none;
}
My goal is to remove borders. It works fine in Firefox, Google Chrome, iPhone Safari, etc. Unfortunately I have an issue with Android 2.3.4.
With Android when I focus on the "password" field, I see thin black border... I tried all CSS combinations, nothing helped...
Many thanks in advance for your help!
-webkit-user-modify: read-write-plaintext-only; for remove ce special styling on focus ;)
This remove all the Webkit style on focused input in Android (PhoneGap)
For Android ICS, adding both should solve the problem:
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:rgba(0,0,0,0);
I'm not sure which build you were testing on, but I ran into similar problems w/ WebKit 533.1 on Android. I decided to dig into the source code for the default styles. There are a handful of default focus styles and 2 specific to the "password" type.
Our problem was related to the "outline" property. According to Mozilla's MDN, "Outlines do not take up space, they are drawn above the content." (Emphasis mine.) In other words, the default outline styles were being drawn above our border styles.
Try manipulating the outline styles instead of the border or -webkit-tap-highlight-color styles.
change your style like this:
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
-webkit-tap-highlight-color:none;
border:none;
outline:none;
}
Looks like the web browser, which included with Android 2.3, displays some special input field (native?) over the html content when you type a password. This input field always has the 1px black border and white background.
The workaround is to use the <input type=text> field instead of standard password field and add the -webkit-text-security: disc; style.
But since Android 2.3 is no longer a priority platform, I will leave this black border issue as is in my project.