My application is running based on following libraries:
jQuery Version: 1.9.1
jQuery Mobile Version: 1.3.1
I made a table with 4 clickable cells:
jsFiddle example
when I build my app in Phonegap, those tabs are working fine on iOS and Android 4.4, but
doesn't work on Android < 4.4.
when click those cells, nothing happened. I have to keep the data-position="fixed" data-tap-toggle="false" as if I remove it, the tabs are collapsed.
anyone experience the same issue? Sorry if I didn't put in all codes in as it's a large project.
<div class="sortbar" data-position="fixed" data-tap-toggle="false">
<table style="background-color:#555;border:none;">
<tbody>
<tr id="tick_top_menu">
<td width="25%" onclick="alert('1')">tab1</td>
<td width="25%" onclick="alert('2')">tab2</td>
<td width="25%" onclick="alert('3')">tab3</td>
<td width="25%" onclick="alert('4')">tab4</td>
</tr>
</tbody>
</table>
.sortbar {
padding: 0px;
width: 100%;
left: 15px;
top: 64px;
height: 100px;
}
Finally, I found this is related to hardware acceleration.
by applying following CSS on that navigation div solved my problem:
.androidpaintfix {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0, 0, 0);
}
Related
I am not sure but I think that Chrome for Andoird started zooming on fixed elements without those elements breaking the page/layout any more on zoom.
Please check this simple JSFiddle in your local dev environment running latest Chrome for Android (on a mobile device).
When I zoom the page that has this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
and two fixed elements at the top, the zoom is done like so.
The fixed elements are positioned absolutely and can be zoomed in without having the fixed elements stay in place and break the page/layout.
This happens regardless of if the user has overridden the zoom settings in the accessibility settings or not, even the default zoom started to play nice with fixed elements I think.
Is there a changelog somewhere please for Chrome for Android for the latest update? I cannot find it and am looking to verify if this assumption is correct.
HTML
<div class="fixed-placeholder">
<div class="site-header">
Site Header
</div>
<div class="menu-icon">
Menu
</div>
</div>
<div class="content">
Content
</div>
<div class="content">
Content
</div>
<div class="content">
Content
</div>
<div class="content">
Content
</div>
CSS
.fixed-placeholder {
height: 6em;
display: block;
}
.site-header {
position: fixed;
height: 3em; /* same as fixed-placeholder to avoid page jump or content moving under the fixed element */
top: 0;
left: 0;
width: 60%;
background-color: #ccc;
font-size: 2rem;
/*width: 80vw;*/
/*display: none;*/
}
.menu-icon {
position: fixed;
height: 3em;
top: 0;
right: 0;
border: 1px solid black;
width: 40%;
font-size: 2rem;
/*width: 20vw;*/
}
.content {
height: 500px;
border: 1px solid green;
}
This is my first question, sorry if I made something wrong.
Well I'm trying to create a rounded button that dynamically "fills" according to a parameter. I've created an inner div inside the button, absolute positioned in the bottom. It works perfect on chrome webview, but I cant make it work on android 4.1.
here is how it should look:
right
and this is how it looks on android 4.1:
wrong
This is my code:
<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
<a style="overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) " ng-class="{'button-dislike':var==1}">
<img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
<div style="-webkit-transition: all 0.9s ease-in; height:{{(thread.get('ratio'))*100}}%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
</a> </div>
The "button" class is position:relative and the other classes just add a different border color.
I've tryed everything I could find with no success...
Thanks!
You need to change the block formating context of <a> and set it to relative position too:
<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
<a style="display:inline-block;position:relative;overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px;border:solid; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) "
ng-class="{'button-dislike':var==1}">
<img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
<div style="transition: all 0.9s ease-in; height:62.5%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
</a>
</div>
added :
a {
display:inline-block;
position:relative;
}
Do not mind the webkit prefixe not needed anymore or use last the non prefixed rules (transition)
I've created my website, but now at a mobile device (my Samsung Galaxy S4 Android phone), the contact form ignores the set width for the fields.
Part of the HTML code:
<tr>
<td valign="top">
<label for="name">Name *</label>
</td>
<td>
<input type="text" name="name" maxlength="50">
</td>
</tr>
Part of the CSS code:
input, textarea {
border-radius: 9px;
border-style: solid;
border-width: 1px;
border-color: #000000;
padding-left: 10px;
width: 450px;
}
Now everything exept for the width** works just fine, and everything including the width works on my laptop (using google chrome). My question: why does my android device (using Chrome for Android) not work?
** the width is too big for the container, which makes the submit button disappear outside of the container as well, this is because the button's float is set to right
I'm developing a phone-gap application and testing it on 3 android devices. Some codes are:
Main area:
<body>
<div data-role="page" id="home">
<div class="banner"></div>
<div id="another_div">Welcome</div>
<div class="blank_div"></div>
<img src="img/connecting2.png" alt="Loading..." id="loading"/>
<div data-role="footer" class="footer_div">
</div><!--Footer-->
</div>
</body>
Some css:
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
display:block;
background-color:#FF0;
}
#now_play_div
{
white-space:pre-wrap;
font-size:1.5em;
position:fixed;
height:7%;
display:block;
background:#FFF;
width:100%;
text-align:center;
top:30%;
padding-top:1%;
-webkit-marquee: auto medium infinite scroll normal;
overflow-x: -webkit-marquee;
border-radius:10px;
}
.blank_div
{
width: 100%;
min-height:41%;
max-height:41%;
margin-left:auto;
margin-right:auto;
display:block;
}
.footer_div
{
color:#FFF;
position:fixed;
height:10%;
display:block;
background:#46639d;
width:100%;
text-align:center;
bottom:0px;
padding:1%;
}
Now the banner is fixed. blank_div is used so that my main content doesn't go under the fixed banner. After some work the loading image will be gone and filled with some dynamic content. I can scroll that content but my banner and footer is fixed. another_div is fixed too.
This system works perfectly on Sony ericsson(android version:2.3) and symphony(android version:4.0.4). But fails to work properly on Google nexus 7(Android: 4.3) In nexus while I scroll my main content that is dynamically loaded just under the blank_div the banner started to fall down. WEIRD!!!!!! While my contents go up, banner comes down. But in other 2 devices it works just fine. Does anybody know what's wrong?? Or what I'm missing?
I guess no more answer will come. So here is the answer which I found from #Era's comment.
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
left:0%;
display:block;
background-color:#FF0;
}
I'm laying out an email to be viewed across browsers and mobile platforms and mostly all is going well. It's laid out in tables, using inline styling etc. However, despite a media-query to the effect of a 600px max-width, the Gmail app on at least my and one other Android I have access to is opting to resize the images and layout to fit into it's area instead of using the media query or letting it fit itself into the window normally, either of which would be fine.
For personal use, I'm able to 'turn off auto-resize' on my phone, and then the email lays out as it would in a browser.
Is there a means to either tell the Gmail app not to auto-resize from the email size or to use the media query instead?
As Google does itself (sic!) here you should add a small hack on top of your template, right after your <body> tag:
<!-- Gmail hack -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;"> </div>
<!-- /Gmail hack -->
Since Gmail and Inbox will ignore the display:none, the hack will affect only those two clients.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Then set the style attribute on an image (1px gif works) that spans the full width of the page (style="min-width:600px;"). Everything will be laid out correctly, and it'll be scrollable.
Gmail in general doesn't support media queries, or the style tag in general, which is why we have to move everything inline.
Inspired by css-tricks.com, this block of code solved my issue.
Place it right before </body>.
<table class="gmail-app-fix">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
<tr>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
(Tested with Gmail 6.0 and Inbox 1.20 on Android 5.0.1, resolution 720x1280 (works on both portrait and landscape orientation)).
I just added style="min-width:290px;" to my outer most table, which is the smallest size my responsive emails view and its stopped moveong my blocks around and doesn't auto-resize. This means in Gmail App the email shows as a whole email.
The solution that worked for me was to apply a min-width: 600px to the outermost table in my template. This worked on the Android Gmail application. (Note that my layout uses 600 pixels. Your layout might be different)