So here is a tiny jsFiddle :
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
.navButton {
font-size:30px;
height:43px;
text-align: center;
}
</style>
</head>
<body>
<div style="display:inline-block">
<a class="navButton" href="#"><i class="fa fa-camera"></i></a>
<a class="navButton" href="#"><i class="fa fa-camera"></i></a>
<a class="navButton" href="#"><i class="fa fa-camera"></i></a>
</div>
<div style="display:inline-block">
<a class="navButton" href="#">Bla</a>
<a class="navButton" href="#">Bla</a>
<a class="navButton" href="#">Bla</a>
</div>
</body>
</html>
It behaves perfectly fine pretty much everywhere, but on my LG G2 and Galaxy Note 2 phones' native browser (it works fine on the Chrome app), when I press one of the right camera links, it displays a white rectangle which covers about half of the icon on the left of it, as follows (here I touched on the right camera):
Debugging this issue on chrome://inspect shows absolutely no clue: not a single CSS property of any of the elements changes when the link is pressed. When inspected, the display shows no margin or padding colouring in the elements. Using the developer tools, this white rectangle is spawned when forcing any of the three states. (:active, :hover, :focus)
This looks like... a bug? Even if so, any idea how I could avoid this effect with the same kind of rendering?
Also apparently, it's not actually white overlay, this defect just covers icons with "transparency", as shown in this image with a background-color: red on the body:
So this was the problem. As the answer to that question suggests, I managed to fix my issue by overriding the font files' order in my css, in order to put svg file in front:
#font-face {
font-family:'FontAwesome';
src:url('/font-awesome/fonts/fontawesome-webfont.eot');
src:url('/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'),url('/font-awesome/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),url('/font-awesome/fonts/fontawesome-webfont.woff2') format('woff2'),url('/font-awesome/fonts/fontawesome-webfont.woff') format('woff'),url('/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
If you do override the font in your custom CSS (and not modify the original Fontawesome CSS file, which I see as bad practice due to possible future updates of the framework), make sure to change the files paths to reach them.
i want to use drag and drop function in phonegap android application.
I tried it in all ways but its not working.
i used this
<script>
$(document).bind('pageinit', function() {
$( "#sortable" ).sortable();
});
i included all the necessary files there but still its not working
i want to use drag and drop on table row
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
in website i.e in web browser its working fine but on mobile application its not working.
Please help me out for this.
If you have been using jquery.ui it will work only on PC browsers, and wouldn't respond to touch. It you want to make it responsive to touch as well, you just need to include jQuery UI Touch Punch, in your head section after jQuery UI. And it should work fine. You can first test your app in Chrome simulator for various devices using ( Ctrl + Shift + I ) and selecting the desired device.
Hope this helps. Please mark as answer if this answers you.
I have a HTML email that uses tables and no styling which can be viewed fine on an iphone and other email programs, but on an Android phone, it shows zoomed in and you can't pinch to zoom out on it.
Is there anyway I can force the email program to view full screen and allow zoom out?
I take it the email is created with inline CSS and tables,
Desktops like the width to be in % in order to cover the entire width, and Apple products adjust to that, however Android needs to be in px. Try this:
<body style='width:100%; min-width:600px; ' >....</body>
Additionally for reference an article based on optimizing email designs for Android devices?
http://www.campaignmonitor.com/blog/post/3638/why-cant-i-get-my-html-email-to-look-great-on-android-devices
The solution above does not work in all cases.
We have seen many different solutions around the web like for example declare the viewport meta such as :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
or the body :
<body style='width:100%; min-width:600px; ' >
He did not work for us on simple emailing.
Another solution will be to put table inside TD every time your want to create a new row such as and set the td width a 600px width :
--- YOUR CONTENT ---
This one seems to be a bit annoying for us.
The solution that did work for us in all cases is to wrap the content of ALL your email within a td with a specified width of 600px and to display it as a block, like this :
<table width="600" align="center">
<tr>
<td width="600" style="min-width:600px;display:block;">
--- HERE GOES YOUR EMAILING STARTING WITH A TABLE ---
<table>
<tr>
<td> HELLO THIS MY EMAIL</td>
</tr>
</table>
</td>
</tr>
</table>
I have a page with the following directives
<meta name="viewport" content="width=device-width, user-scalable=no" />
I generate dynamically table cells in the following placeholder:
<div id="gadget_albums" style="width:100%;overflow: auto; ">
<table>
<tr id="albums_t"></tr>
</table>
</div>
It works perfectly on iOS devices, but for some reason no horizontal scrolling on Android. What could be a reason?
From this side I see like people try use
-webkit-overflow-scrolling: touch
but no luck either. Any solution?
The overflow: auto property for a <div> is not yet available in Android.
You'll have to find a work around for this. I mean using the combination of JavaScript, css, HTML you can achieve this.
Check this out.
Hope this helps.
I am having problems with the auto resize feature of the android browser. The widths on my site are going a bit haywire when the device is in portrait mode.
What I would like to do is
Have the same version of the site for both desktop and mobile users.
Allow the user to zoom in and out as they please.
I currently have the following in my head
<meta name="viewport" content="width=1100">
I found the following blog post which describes my problem.
This is definitely caused by the auto-fit layout
("kLayoutFitColumnToScreen" in the Android WebKit source code). Just
try the test with auto-fit disabled and everything is rendered
correctly (at least on my Android device).
The auto-fit mode on Android seems to shrink certain elements' width
without affecting their positioning, or the positioning of other
elements. So if you have a containing block with width: 1000px and
text that spans 100% of that width, the container may remain 1000px
wide but the text inside it will wrap at the screen width.
http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html
Is there a way to stop this autofit mode from kicking in? I don't want to disable zooming.
Update:
I am still searching for a solution if anyone knows of one.
Have found someone with the same problem (although they are using tables)
Spanned columns collapsing on Android web-browser (when using auto-fit pages)
http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
I have been experiencing this problem and found a solution that works for me.
I have one main <div> with some nested <div> elements inside. The HTML is very basic. I found that one <div> within my main <div> would wrap its text as if I had double-tapped the text to zoom in on it. This <div> only contained text. This behavior occurred only in portrait orientation, and it corrected after double-tapping or switching orientation.
Since this problem is an Android bug, no CSS or HTML can really fix it. However, the following CSS resolved the problem satisfactorily for me; and I didn't have to turn off "Auto-fit pages":
I added a CSS background-image to the <div>. I just used a transparent, one-pixel PNG as the background.
div { background-image: url(../img/blank.png); }
Just furthering the answers above which worked for me with an important caveat: the redraw time in IE8 makes the 1x1 transparent pixel method unusable on that target on a decent size canvas.
Since CSS can't detect auto-fit, or android browsers (chrome on Android seems fine anyway), my workaround was to
target smaller devices (since IE8 tends to be desktop), and
only target the relevant 'p' tags (autofit only targets some 'p' tags), so if we apply this fix only where it is needed then we keep the redraw performance impact as low as possible.
My workaround (based on Demetic's answer above):
/* work around mobile device auto-fitting */
#media only screen and (max-device-width: 800px) {
#content p {
background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
background-repeat:repeat;
}
}
On my website '#content' is where the 'p' tags reside that are being auto-fitted, naturally you'd need to change this. 'body' will work, yes, but the more specific the lower the impact on redraw time.
It may be worth adding in a portrait-only detection mode since auto-fit doesn't seem to be targeted at landscape - but I haven't tested it on enough devices to confirm that this is always true.
I just wanted to confirm that Delbert's solution was the only thing that worked for me. It's not completely apparent as to why this works, but it works. I've done some fairly exhaustive searching on the issue, and the links from Tom's original post seems to include about all there is out there.
For what it's worth, I tried some fairly aggressive attempts at correcting the width of some <p> tags nested deeply within a chain of <div> tags using some of the proposed solutions here:
* { background-color: transparent; } did not work for me.
However, * { background-image: url("/image/pixel.png"); DID work for me (where pixel.png is a 1x1 transparent PNG). I eventually relaxed this to apply only to my nested <p> tags, and found that my paragraphs were finally spanning the intended, correct width.
I also confirmed that the behavior is a result of the "Auto-fit web pages" setting. I do not own an Android, but experienced these issues using the emulator.
Thanks again to Delbert for the tip.
Same problem here. The content within my <p> tags is smushed to left side. No good solution found yet though I've found that if I add a background color to my <p> tag it "fixes" the issue. I'm still trying to find a real fix though since adding a background color is not ideal.
*{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}
Yes it seems that Android 4.x is in cause. Really annoying because it is the default behaviour !
It completely destroy all my websites...
I didn't found any solution at the moment.
The proper behaviour is to fit the text with the width of your screen when you double tap the area. It seems that this feature is active even when not zoomed.
I simply add a transparent png image as a repeated background. This also works for H1, H2, H3... tags that seem to be plagued by the same narrow-column problem. By using a transparent png, it allows me to still assign a background color or show whatever is behind the element. This is not perfect, but it is the simplest solution I have found that does not rely on any browser-specific hack and seems to work well in all other mobile browsers I have seen.
Although, I have noticed the same behavior on SPAN tags as well, and the above does not seem to work for this element... weird!
give Width in % instead of px, like width:100%;
I have nearly the same problem with p tags and li's they are much smaller then the surrounding container, but only with Android 4.x. With Android 2.3.x and Android 3.x "auto-fit pages" has no negative side effect.
Seems they tried to improve something, but it worked better before, that's annoying.
This appears to be a programming issue with Android. But in your mobile browser under Settings=>Advanced uncheck Auto-fit pages and this can be resolved. But we may not want our users to abide. So for the time being a simple hack as to placing a transparent background image should not be ruled out as a temporary solution. Using Drupal as a framework and Omega as my responsive theme and knowing my layout regions and outer DIVs are set to {display:block width:100%} this drove me nuts for a few minutes. But the transparent image worked nicely.
I set a min-width and a width on the td where my email content lives and is now working fine in Android's gmail app where versions use autofit mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gmail Issue</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" valign="top"></td>
<td width="1100" valign="top" style="min-width:1100px;"></td>
<td width="50%" valign="top"></td>
</tr>
</table>
</body>
</html>
One thing is for sure, the auto-fit 'feature' is causing a lot of gray hair for developers.
I solved the issue by inserting a transparent image, 1 pixel tall and 650 pixels wide (the width of my email) at the very top of my email.
Even with auto-fit enabled my email now renders as it's supposed to.
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
<!-- HERE'S THE MAGIC -->
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1">
<img src="spacer.png" width="650" height="1" style="width:650px; height:1px;" />
</td>
</tr>
</table>
<!-- END THE MAGIC -->
<!-- Start Wrapper-->
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td >
REST OF EMAIL HERE
</td>
</tr>
</table>
<!-- End Wrapper-->
</td>
</td>
</table>
By adding a background image to your css, auto-fit will be disabled.
Other posters have suggested adding a single pixel transparent background, but you can actually just add an empty background image to the top of your css stylesheet and skip the additional http request and redraw.
div, p {
background-image: url();
}
I have tested it in my emulator and my Galaxy SII and it seems to work the same as adding an actual url.