I want to show a small colored dot in front of a price tag. The dot should be centered vertically next to the price and scaled up a bit.
This works on chrome desktop, iOS, Safari and others.
But on Android the dot is huge and takes up the entire space of the div.
.item.green::before {
content: "●";
color: #7ED321;
}
.item {
transform: scale(1.4);
display: inline-block;
vertical-align: text-top;
}
.priceText {
bottom: 20px;
}
<div class="priceText">
<span class="item green" style="" title="Verfügbarkeit"></span> 1.050 €
</div>
How can I center the dot verically and make sure in Android it is shown with the scale factor provided?
Consider a simple background instead where you can easily adjust the size and position.
You can also consider CSS variable to adjust the color:
.priceText {
padding-left: 15px;
background:radial-gradient(var(--c,#7ED321) 4px,transparent 5px) /*4px radius*/
left center /*position*/
/
10px 10px /*size: must be at least 2xradius*/
no-repeat;
}
.orange {
--c:orange;
}
<div class="priceText">
1.050 €
</div>
<div class="priceText orange">
1.050 €
</div>
Another syntax:
.priceText {
padding-left: 15px;
background:
radial-gradient(circle at 5px 50%, var(--c,#7ED321) 4px,transparent 5px)
no-repeat;
}
.orange {
--c:orange;
}
<div class="priceText">
1.050 €
</div>
<div class="priceText orange">
1.050 €
</div>
You can use media query to control what happens when the screen size is scaled down to Android
#media screen and (min-width: 400px) {
.items {
transform: scale(1.4);
}
}
Related
I have a chatbot window and have to position that on fixed right-bottom. I have put CSS settings below for fixed positioning as well as viewport settings.
The chat windows in CSS fixed bottom right is having a textbox at the bottom.
In Android devices, when that textbox is in focus, the soft keypad is appearing over the textbox, without the normal behavior of the movnig webpage above and positioning textbox above the keypad. So users cannot see what they are typing.
Screenshot : https://ibb.co/G0mNQV8
When I changed the CSS position of the chat window to absolute, then keypad in focus works fine as usually. But when not in focus if scrolled, the entire chat window is moved up, instead of being fixed in bottom-right.
I need to fix both cases, to gain normal behavior of soft keypad in focus and also, fixed positioning.
Please refer to the following code snippets and if you can help to resolve it, it would be great.
#viewport {
min-width: device-width ;
zoom: 1.0 ;
initial-scale:1.0;
maximum-scale:1.0;
user-scalable:1.0;
}
#-ms-viewport {
min-width: device-width ;
zoom: 1.0 ;
initial-scale:1.0;
maximum-scale:1.0;
user-scalable:1.0;
}
#live-chat {
display:none;
bottom: 0;
right: 0;
position: fixed;
width: 99% !important;
max-width:350px;
max-height:100vh;
background: #e9e9e9;
color: #eae2e2;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
z-index: 10000; box-shadow: 0px 0px 20px 4px #ccc;
}
<div id="live-chat-container">
<div id="live-chat">
<header class="clearfix">
x
<h4> <img src="https://www.xxxx.com/chat/cf-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
</div> <!-- end chat-history -->
<p class="chat-feedback" style="display:none;">Your partner is typing?</p>
<form action="#" method="post" onsubmit="return chatsend();">
<fieldset class="cbtgroup">
<input type="text" placeholder="Type your message?" id="cbt" autocomplete="off"><input type="submit" value="»" class="cbt" id="cbtbtn">
</fieldset>
</form>
<div style="font-size:xx-small;text-align:center;">Powered by xxx.com</div>
</div>
</div> <!-- end live-chat -->
I found a solution for the issue and posting it here as it will be helpful for anyone having the same issue.
I did wrap chat window outer div, with an extra div, gave it fixed position and top, bottom 0.
Then changed the position of chat window div to 'relative and have height of 93.9% of its container.
Above two helped to fix both scrolling issue (to keep chat window fixed to bottom right) and avoiding soft keypad to covering textbox
In android another issue was noted after this, soft keypad was appearing even after textbox loses its focus, so used following js function taken from here .
#live-chat-wrapper{
bottom: 0;
right: 0px;
position: fixed;
width: 99% !important;
max-width:351px;
max-height:484px;
margin: 0;
z-index: 100000;
-webkit-transform: translate3d(0,0,0);
}
#sigiriyalive-chat {
display:none;
bottom: 0;
right: 0px;
position: relative;
width: 99% !important;
max-width:350px;
height: 93.9%;
transition: height 1s ease;
background: #e9e9e9;
color: #eae2e2;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
z-index: 1000001;
box-shadow: 0px 0px 20px 4px #ccc;
}
<div id="live-chat-wrapper">
<div id="live-chat">
<header class="clearfix">
x
<h4> <img src="https://www.wm.xxx.com/chat/xx-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
</div> <!-- end chat-history -->
<p class="chat-feedback" style="display:none;">Your partner is typing?</p>
<form action="#" method="post" onsubmit="return chatsend();">
<fieldset class="cbtgroup">
<input type="text" placeholder="Type your message?" id="cbt" autocomplete="off"><input type="submit" value="»" class="cbt" id="cbtbtn">
</fieldset>
</form>
<div style="font-size:xx-small;text-align:center;">Powered by xx.com</div>
</div> <!-- end chat -->
</div> <!-- end sigiriyalive-chat -->
</div>
function hidekeyboard() {
//this set timeout needed for case when hideKeyborad
//is called inside of 'onfocus' event handler
setTimeout(function() {
//creating temp field
var field = document.createElement('input');
field.setAttribute('type', 'text');
//hiding temp field from peoples eyes
//-webkit-user-modify is nessesary for Android 4.x
field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
document.body.appendChild(field);
//adding onfocus event handler for out temp field
field.onfocus = function(){
//this timeout of 200ms is nessasary for Android 2.3.x
setTimeout(function() {
field.setAttribute('style', 'display:none;');
setTimeout(function() {
document.body.removeChild(field);
document.body.focus();
}, 14);
}, 200);
};
//focusing it
field.focus();
}, 50);
}
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 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'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).