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'm experiencing a strange problem on the stock browser on an HTC One X running Android 4.2.2.
I have a container div with overflow-x set to hidden and overflow-y set to auto, it has fixed width and height dimensions. The child content has width and height that exceeds its parent. The idea is that you should be able to scroll vertically but not horizontally. Every browser that i've seen behaves correctly and I get the desired effect. However, on this Android Stock browser I am able to scroll horizontally AND vertically freely, which is not what I want as the overflow-x: hidden is supposed to prevent horizontal scrolling.
I've created a codepen to demo the basic problem:
http://codepen.io/anon/pen/YXjZKR
Code here too:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1' />
<style>
.container{
width: 300px;
height: 500px;
overflow-x: hidden;
overflow-y: auto;
}
ul.pages {
position: relative;
margin: 0;
padding: 0;
white-space: nowrap;
}
li {
width: 300px;
line-height: 500px;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: top;
text-align: left;
white-space: normal;
height: auto;
}
li.one {
background-color: red;
}
li.two {
background-color: yellow;
}
li.three {
background-color: green;
}
</style>
</head>
<body>
<div class="container" id="container">
<ul class="pages">
<li class="one">Hello<br /><br /></li>
<li class="two">good</li>
<li class="three">bye</li>
</ul>
</div>
</body>
I have also noticed that if I shorten the height of the child content to be less than the container, then the content no longer scrolls horizontally either. Unfortunately the content will always be taller than the container.
Have spent hours trying to work out why this is happening and, more importantly, looking for a workaround but have had no luck so far.
Any help would be really appreciated.
Thanks
I'm assuming that the <li> elements are set to display: inline-block in order to hide them horizontally. If so, your issue is that the .container element is not the parent of the <li>.
The actual parent - the ul.pages - is defaulting to overflow: auto in this browser for some reason. Set that to overflow-x: hidden and you should be alright.
I am developing the android apps in phonegap but in that my html not showing properly on android phone. problem is that i have four div's first div showing the canvas which is width and heigh is 100% , second div showing the header and third div showing the text data which is coming from server and last is div is for contact form but what happen if content of the third div is increases then it showing content from the middle but i want to show the page from top. please see the below image. following is the my html and css which is working properly on browser but not working properly on real device and i am also uploading screen shot. Please help me find out this bug.
html
<div id="page">
<div id="wrapper" style="display: none">
<div id="header">
<div class="designtech-left back"><a href="javascript:void(0);" id="backToFirstPage" class="back_button" >Back</a>
</div>
<div class="designtech-left"><h3 style=" font-size:14px; font-weight:bold;">Coures Detail</h3></div>
</div>
<div class="designtech-clear"></div>
<div class="course_info_div" id="courseInfo">
//dynamic content name , branch, duration and desc
<p class="pclass">Course name : <span> Catia & 3D Max</span> </p>
<p class="pclass">Branch name :<span> Pune</span> </p>
<p class="pclass">course duration :<span> 6 Months</span> </p>
<p class="pclass">Description : <span> Details</span> </p>
</div>
<div class="designtech-clear"></div>
<div class="contact">
<form id="contact-form" method="post">
<h3>Enquiry form</h3>
<div>
<label>
<span>Name: (required)</span>
<input placeholder="Please enter your name" type="text" id="name" >
</label>
</div>
<div>
<label>
<span>Email: (required)</span>
<input placeholder="Please enter your email address" type="email" id="email-id" >
</label>
</div>
<div>
<label>
<span>Telephone: (required)</span>
<input placeholder="Please enter your number" type="tel" id="contact" >
</label>
</div>
<div>
<label>
<span>Message: (required)</span>
<textarea placeholder="Include all the details you can" id="enquiry" ></textarea>
</label>
</div>
<div class="center">
<button name="enquiry-form" type="button" id="enquiry-form">Submit</button>
<img src="res/drawable-mdpi/gif-load-medium.gif" id="email-progress" style="display: none;"/>
</div>
</form>
</div>
</div>
</div>
css
#page{
width:100%!important;
height:100%;
background-color:#ffffff;
text-align: left;
margin: 0pt auto;
padding: 0 0px;
position: relative;
}
#wrapper{ width:100%;}
#header {
position: fixed;
z-index: 3;
top: 0px;
left: 0px;
width: 100%;
min-height:45px;
color: #eee;
font-weight: bold;
border-bottom: 1px solid #FFFFFF;
background: rgb(255,5,5); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,5,5,1) 0%, rgba(143,2,34,1) 69%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,5,5,1)), color-stop(69%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0505', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.course_info_div
{
position:relative;
top:45px;
background:#BCB9B9;
padding: 12px 10px 20px 10px;
font-weight:bold;
font:16px;
text-align: justify;
}
.course_info_div p.pclass{
font-weight:bold;
padding: 5px 0;
}
.contact{
width:100%;
margin:0 auto;
}
#contact-form {
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:#F9F9F9;
padding: 10px 30px 0px 10px;
position: relative;
}
below image showing the two views. left side view which is I want and right side view is on real device and emulator.
Pardon if this is way off but have you tried calling an location.href to an anchor point on the page after the server data has been received? I'm curious if that would work. So something like:
HTML:
<div id="courseInfo">
<a name="courseInfo"></a>
<p class="pclass">Course name : <span>
<!-- ...etc -->
</div>
Javascript:
function refreshUIAfterServerData(){
document.location.href = 'index.html#courseInfoAnchor';
}
Clearly this doesn't get to why the issue is occurring - but honestly after dealing w/Android PhoneGap stuff myself for a while now - I've given up asking why on many things and just do what I have to to get in and out fast as I can!
I'm having a problem with a web page I'm developing, a Price Per Unit Calculator (in HTML, CSS, and JavaScript/jQuery): When viewed in the Android 2.3.3 default web browser, the menus near the top of the page, Unit type and Display unit, aren't popping up (to let the user select an item from the menu). This problem occurs in both the Android emulator and an Android phone running 2.3.3. The menus work fine with later versions of the Android web browser I've tested (4.0.3 and 4.2 in the emulator), as well as in iOS 6 and on a computer (Firefox and Chrome browsers tested).
In the Android 2.3.3 web browser, when a menu is tapped, a colored rectangle should highlight the menu on the web page, then the menu options pop up in a list on the screen. On my web page, for those menus near the top of the page, the rectangle appears (wider than the menu that was tapped), but seems to stop when it hits the bottom of the div (row) the menu is in, and no menu options pop up; see the orange rectangle in this screenshot. The menus lower in the web page work fine.
Here's the simplified HTML:
<div class="header">
<div class="global">
<div id="unitTypeDiv" class="options col1 unit"><!-- left column-->
<label for="unitType" class="label">Unit type</label><br>
<select name="unitType" id="unitType" class="unitType_input" title="Unit type">
<option value="weight">weight</option>
<option value="volume">volume</option>
<option value="length">length</option>
<option value="area">area</option>
</select>
</div>
<div id="displayUnitDiv" class="options col2 unit"><!-- center column-->
<span id="displayUnitLabel"><label for="displayUnit" class="label">Display unit</label><br></span>
<select name="displayUnit" id="displayUnit" class="displayUnit_input unit_input" title="Display unit">
<option value="oz">oz</option>
<option value="lb">lb</option>
</select>
</div>
</div> <!-- .global -->
</div> <!-- .header -->
<div id="products">
<form method="post" name="priceper" id="priceper">
<div class="product" id="product_0">
<div class="name">
<label for="name_0" class="label"><span>Product 1:</span> Name<br></label>
<input name="name_0" type="text" id="name_0" title="Product 1">
</div>
<div class="unit row">
<label for="unit_0" class="label">Unit</label><br>
<select name="unit_0" id="unit_0" class="unit_input product_unit_input" title="Please choose a unit"> <!--replace with select (pop-up menu)-->
<option value="oz">oz</option>
<option value="lb">lb</option>
</select>
</div>
</div> <!--product_0-->
</form>
</div> <!-- products -->
Edit: Here's the CSS:
body {
background-color: #ddd;
color: #222;
font-family: Helvetica;
margin: 0;
padding: 0;
}
/* HEADER STYLES */
.header {
position:fixed; /* Keep header (title) at top of page always */
top: 0;
width: 100%;
z-index:99998; /* Bring to front */
/*border: 1px dashed red;*/
}
.header h1 {
padding: 0;
text-align: center;
text-shadow: 0px 1px 0px #fff;
/*background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(red));*/ /* iPhone linear shading; not working*/
/*border: 1px dashed red;*/
margin-top: -3px;
margin-bottom: -3px;
background-color: #ccc;
padding-top: 5px;
padding-bottom:3px;
text-align: center;
border-bottom: 1px solid #666;
}
.header h1 a {
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.global {
/*border: 1px dashed red;*/
background-color: #eee; /* Background color */
height: 43px;
padding-top: 0px;
z-index: 9999;
/*border-bottom: 1px solid #666;*/
}
.col1 { /* Unit type menu */
float: left;
margin-left: 5px;
/*border: 1px dashed red;*/
}
.col2 { /* Display unit menu */
float: none;
overflow: hidden;
text-align:center;
/*display: table-cell;*/
/*border: 1px dashed green;*/
position: absolute;
/* center on browser window: put left at 50%, then offset left (margin-left) by half the width (half of 30% = 15%) */
width: 50%;
position: absolute;
left: 50%;
margin-left: -25%;
}
/* PRODUCT STYLES */
.product {
padding-top: 2px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
background-color: #DCDCDC;
border-bottom: 1px solid #999999;
color: #222222;
}
#product_0 {
margin-top: 100px;
}
Apparently the Android 2.3.3 web browser didn't like the last CSS property, margin-top, on a div, #product_0, below the one the problematic menus were in. Simply changing the property to padding-top worked:
#product_0 {
padding-top: 100px;
}
Here's the resulting web page (full version rather than simplified code).