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;
}
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;
}
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 using bootstrap to display some thumbnails in a div. The thumbnails are actually canvas because I need to create lighter thumbnails client-side.
It actually isn't perfect design (I am more a developer than a designer) but it works pretty well.
However I wonder about the following: when I look at the app with a mobile, in portrait mode, then I get the col-xs-6 class, and the screen looks fine. But when I rotate the screen, it appears I still get the col-xs-6 and its associated pixel size - which looks pretty ugly - screenshots:
rotated screen:
http://imgur.com/cNTGWy0
normal screen:
http://imgur.com/ZHlwq42
Is this a bug on the phone, or on the phone's browser (using Galaxy S3)- or is my code wrong? Shouldn't rotating the browser give a different resolution? Should I just ignore this issue, as maybe there's no elegant solution?
This is the HTML:
<div id="upload-list">
<!-- for each image -->
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="thumbnail">
<div class="caption">IMG_0004.JPG<i><br>6.14 MB</i></div>
<div style="display: none;" class="abort_upload working">
<span class="alert-warning glyphicon glyphicon-remove-circle"></span>
</div>
<!-- This is for upload progress display -->
<div class="knob-outer">
<div class="knob-progress">
<div style="display:inline;width:64px;height:64px;">
<canvas height="64" width="64"></canvas>
<input style="width: 36px; height: 21px; position: absolute; vertical-align: middle; margin-top: 21px; margin-left: -50px; border: 0px none; background: none repeat scroll 0% 0% transparent; font: bold 12px Arial; text-align: center; color: rgb(7, 136, 165); padding: 0px;" readonly="readonly" value="0" data-width="64" data-height="64" data-fgcolor="#0788a5" data-readonly="1" data-bgcolor="#3e4043" type="text">
</div>
</div>
</div>
<!-- the actual canvas with the image, is being generated client-side after file selection -->
<canvas class="canvas-thumbnail" height="518" width="691"></canvas>
</div>
</div>
</div>
Relevant CSS:
#media (min-width: $screen-xs-min) {
.thumbnail canvas.canvas-thumbnail { height:72px !important; width: 96px !important}
.knob-progress {width: 64px; height: 64px}
}
$screen-xs: 420px !default;
$screen-xs-min: $screen-xs !default;
EDIT: other screen size css
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
#media (min-width: $screen-sm-min) {
.thumbnail canvas.canvas-thumbnail { height:64px !important; width: 86px !important}
}
#media (min-width: $screen-md-min) {
.thumbnail canvas.canvas-thumbnail { height:95px !important; width: 126px !important}
}
There are two other screen resolution. You must handle all.
e.g. you have resolution: 800x600 but if you rotate phone you now have 600x800.
You must see thresholds in bootstrap about width and handle.
I'm trying to create a simple 3 line menu dropdown for mobile screens. I've got something that works, but it doesn't look consistent across devices. The icon's vertical positioning is changing depending on the OS and browser version. The icon should be centered vertically, but I'm seeing:
Linux -desktop
Firefox - slightly low vertical centering.
Chrome - seems to be in the middle.
Windows 8 -desktop
Firefox - seems to be in the middle.
IE 9-11 - seems to be in the middle.
Android
Firefox - very low vertical centering.
Chrome - slightly low vertical centering.
Here is the sample HTML
<div id="nav">
<div class="mobile-bars">
≡
</div>
</div>
and the sample CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
}
and here is the jsfiddle link. Why won't the three line icon stay vertically centered?
Use line-height: 50px;, equals to the height of parent (div.mobile-bars) - TRY DEMO
HTML
<div id="nav">
<div class="mobile-bars">
≡
</div>
</div>
CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
line-height: 50px;
}
[EDITED]
If you have <meta charset="utf-8"> inside the <head> element and using the CSS property line-height: 50px; doesn't solve your problem then I would recommend you to use an Image instead of html unicode character, If you really worry about Firefox on Linux and Android, icon's vertical position.
i added a div with a lot of data in it, and it works fine on a PC and on the Blackberry, but it doesn't work on Android: The data is retrieved with no problems but the div isn't scrollable.
Here is the HTML code:
<div id="scroll">
<div runat="server" ID="view"></div>
</div>
And the CSS:
#view
{
position: absolute;
top: 15%;
left: 0.9%;
width: 98.3%;
height: 75%;
font-family: Calibri;
font-size: 0.5em;
white-space: pre-wrap;
border: 1px solid black;
overflow: auto;
padding: 0.2em;
}
What is the problem?
If you're trying to do this on a native android application, you're going to have to implement a ScrollView:
http://developer.android.com/reference/android/widget/ScrollView.html
I found a creative work-around (that works on Android (2.3.5 Gingerbread) and Firefox browser for Android).
I didn't have the problem reported here on the first site I did but had issues on the second. After finding this answers here I remembered the old site worked so I checked what I did there. Copying over old to new site I was able to fix my problem...
This works on Android/Firefox browser but does not put a scroll bar indicator on screen (but touch-drag scrolls the content down the .
What WORKED for me is dual Tags... EMBED code to scroll in a second tag.
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;">
<div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]
then close DIV tags now the content in the second
may not be the prettiest code or method to use, but it got the job done for me (although I haven't tested in iOS devices).
For what it's worth...
-LB-
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;"><div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]</div></div>