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)
Related
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.
html chrome on pc
<div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 56.25px; top: 63.75px; height: 97.5px; width: 67.5px; overflow: hidden; z-index: 6; border-radius: 50% " ondrop="drag_drop_drop(event, this)" ondragover="drag_drop_allow_drop(event)" onclick="photos_add_selected_fid(this);">
<img src="system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" width="341" height="256" style="left: 0px; top: 0px; position: relative;" class="ui-draggable">
</div>
html default browser on html tablet
<div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 56.25px; top: 63.75px; height: 97.5px; width: 67.5px; overflow:hidden; z-index: 6; border-radius: 50%" ondrop="drag_drop_drop(event, this)", ondragover="drag_drop_allow_drop(event)" onclick="photos_add_selected_fid(this);">
<img src="system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" style="left:0px; top:0px; position: relative;" width="341" height="256" class="ui-draggable">
</div>
EDIT: I had a typo for the second overflow tag (I had to type the source code in manually from the tablet to here). When I fixed that, both jsfiddle's showed the image as expected, however, the android tablet still is not.
This is what it looks like on the tablet:
There is a typo in the second code snippet(html tablet)
Overflow property is set to hiden.
<div id="opening_0" style="position: absolute; left: 56.25px; top: 63.75px; z-index: 6;" ondrop="drag_drop_drop(event, this);" ondragover="drag_drop_allow_drop(event);" onclick="photos_add_selected_fid(this);">
<div id="2_opening_0" style="overflow: hidden; border-radius: 50% ">
<div id="3_opening_0" style="background-color: #bfbfbf; height: 97.5px; width: 67.5px; ">
<img src="/system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" width="341" height="256" style="position: static; margin-left: 0px; margin-top: 0px;" class="ui-draggable">
</div>
</div>
</div>
I basically had to create 2 more divs inside the opening_0 div. The tablet didn't like positioning other than static in the image tag.
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 trying to show two select boxes in a WebView in Android (4.2.1), but the height of them aren't the correct. In higher Android version (4.4.2) the result is correct with the same CSS. I'm using Bootstrap.
HTML code:
<div class="row col-xs-12 texto-cent barrasearch2 separacion-filas visible-xs" id="barraInbox">
<div class="col-xs-12 col-sm-6 col-md-5 ident-der">
<select size="1" name="cmd2" class="select-mod">
<option value="mg_move">Move messages to</option>
<option value="mg_copy">Copy messages to</option>
<option selected="" value="mb_change">Open mailbox</option>
</select>
...
</div>
</div>
CSS code:
.select-mod{
height: 30px !important;
font-size: 14px !important;
-webkit-appearance: menulist !important;
background-color: #fff;
line-height: 1.42857143;
}
Result in Android 4.2.1:
Correct result: (with Bootstrap CSS classes)
Thank you for advance!
It might be caused by the important marks, as usually they mess with my CSS a bit. Try a more specific path to the CSS style:
#barraInbox div select.select-mod {
height: 30px;
font-size: 14px;
-webkit-appearance: menulist;
background-color: #fff;
line-height: 1.42857143;
}
It's hard to tell without knowing what they should look like. There might be a better way to do it. Could you link an image of how it should look?
select {
height:25px;
width:100%;
border: 1px solid grey;
-webkit-appearance: listbox;
background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==); /* a simple arrow img */
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
padding-left: 5px;
}
Please try this this will work for you.
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.