I have created a switchable list of "single image with text" and I only want the active to be visible. All works ok at PC browsers (tried Firefox, IE) but on mobile ANDROID browser (Chrome) I can only see the first "visible" image, while the rest keeps only displaying text.
html:
<ul class="tabs clearfix">
<li class="active"></li>
<li></li>
<li></li>
</ul><!-- tabs -->
<div class="box visible">
<div class="box-text">
<h3>Title</h3>
<p>Text.</p>
</div>
<img src="images/pic1.png" width="437" height="545" alt="">
</div><!-- box -->
<div class="box">
<div class="box-text">
<h3>Title</h3>
<p>Text.</p>
</div>
<img src="images/pic2.png" width="437" height="545" alt="">
</div><!-- box -->
<div class="box">
<div class="box-text">
<h3>Title</h3>
<p>Text.</p>
</div>
<img src="images/pic3.png" width="437" height="545" alt="">
</div><!-- box -->
css:
.tabs li {
width: 20px;
height: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
background-color: #cbcfd1;
margin: 0 13px 13px 0;
-moz-transition: background-color 0.15s linear;
-o-transition: background-color 0.15s linear;
-webkit-transition: background-color 0.15s linear;
transition: background-color 0.15s linear;
cursor: pointer;
}
.tabs li:hover {
background-color: #8bcb9d;
}
.tab li.active {
cursor: default;
background-color: #35a654;
}
.box {
display: none;
line-height: 30px;
}
.box.visible {
display: block;
line-height: 30px;
}
I understand from what I found here that there is some kind of problem with mobile Chrome but since I'm a beginner I can't make heads or tails of what I'm supposed to to with it to make it work. Can anyone help please? When I remove display: none; and put block in there, all images can be seen stacked below each other but that is not desired.
I found out that the problem only occures on a mobile phone size device. Galaxy Tab 2 tablet I tried displays everything ok.
Related
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 am testing a page with a sticky footer. On the GS4 stock browser ONLY (not visible on android chrom), I get the sticky footer floating up and down the page as I scroll up and down. The footer also seems to have a stutter-looking effect. I've tested the same page on iphone 5 and gs3. This is my CSS flow:
.bar {
background-color: #F7F7F7;
overflow: hidden;
position: relative;
font-size: 13px;
}
.bar .footer-icon-holder {
padding: 5px;
display: inline-block;
width: 5em;
}
.bar .footer-holder {
width: 100%;
text-align: center;
margin: 0 auto;
height: 54px;
background-color: #FFF;
bottom:0;
-webkit-backface-visibility: hidden;
position: fixed;
}
and the footer html:
<div class="footer" ng-controller='footerController'>
<div id = "footer" class="bar">
<div style="margin:0 auto;">
<div class="footer-holder">
<div class="footer-icon-holder" ng-click="clickPic('home')" >
<div ng-show="homeSelected">
<img ng-src={{imageOnHome}} class="footerimg">
<div class="toolbar-img-text">home</div>
</div>
<div ng-hide="homeSelected">
<img ng-src={{imageOffHome}} class="footerimg">
<div class="toolbar-img-text">home</div>
</div>
</div>
</div>
</div>
</div>
I'm working on a mobile application and I have a fixed footer menu.
<div id='footer'>
<ul class='menu'>
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
#footer { height:99px; background:url(../images/black2.png)repeat-x; border-top: 1px solid black; position:fixed;bottom:0;width:100%;}
.menu { max-width:640px; margin:auto; }
I tested it on an Android device. The problem is that when I change the device orientation the menu ul's margin:auto doesn't work until I click on another menu item.
Thank you!
I resolved this by changing CSS.
#footer { height:99px; background:url(../images/black2.png)repeat-x; border-top: 1px solid black; position:fixed;bottom:0;width:100%; text-align:center;}
.menu {width:100%; max-width:640px; display:inline-block; }
I would do something like this:
HTML
<div class="footer">
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
CSS
.footer { background: black; position: fixed; bottom: 0; width: 100%; text-align: center; }
.footer ul { color: white; width: 90%; margin: 0 auto; display: block; list-style: none; }
.footer ul li { padding: .25em; display: block; }
On top of that I'd tell you to checkout the "fixed-fixed" plugin from the Filament Group (that aids in mobile fixed positioning since all phones/ tablets don't support it):
https://github.com/filamentgroup/fixed-fixed
On top of top of that, I'd recommend their entire workflow for building for mobile:
https://github.com/filamentgroup/Southstreet/
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).
Please see the photo below to understand the problem:
I have a problem with padding here. I cant place the text of the button "Online Map" in the middle of the button. I'm developing this application for Android.
HTML:
<div class="footer" data-tap-toggle="false">
<div class="wrapper">
<div class="ui-grid-b">
<div class="ui-block-a">Back</div>
<div class="ui-block-b">
<a data-theme="my-site" data-role="button" data-mini="true" onClick="checkReachability()">Online Map</a>
</div>
<div class="ui-block-c home">Home</div>
</div>
</div>
</div>
CSS:
.ui-btn-up-my-site {
color: white;
font-size:8px;
padding-top:0;
padding-left:0 !important;
border:1px solid #333;
text-align:left !important;
padding-right:0;
margin-top:-10px ;
white-space: normal;
}
.footer .ui-grid-b .ui-block-a, .footer .ui-grid-b .ui-block-c { width: 20%; }
.footer .ui-grid-b .ui-block-b { width: 60%; text-align: center; padding:0;}
I spent over 5 hours trying to style this button and still didn't succeed. It driving me nuts..
Can anyone help me?
You can try setting
margin-left: 0px;
margin-right: 0px;
Sometime it solved apparently padding problems for me. Hope it'll work.