So, I'm generating hundreds and hundreds of seperate divs, all that are styled with:
.box {
width: 1px;
height: 1px;
background-color: #000;
display: inline-block;
vertical-align: top;
line-height: 0;
letter-spacing: 0;
font-size: 1px;
}
However, I get a strange issue I can't seem to fix. As there are hundreds of these divs, they wrap onto a new line (which I want to happen), however it leaves a big gap before creating the new line.
Visit https://jsbin.com/rofihu/1 to see the issue yourself, resize your browser to get the divs to wrap.
If I change the width and height of these divs to something bigger like 50x50, this problem disappears.
Thanks in advance.
You have to put line-height: 0px; in your container and not in .box
if you have no container, use
body {
line-height: 0px;
}
https://jsfiddle.net/ahsv5mxb/
Add line-height:1px; to your .container element.
The line height within the box doesn't matter, but the parent sets the distance between lines of text (think of it like a paragraph with a span; if you reduce the size of the span text, it doesn't affect the distance between the lines in the paragraph.)
boxesToCreate = 0;
boxesMarkup = '';
viewportW = window.innerWidth;
viewportH = window.innerHeight;
function createBoxes(num) {
boxesToCreate = num;
if (boxesToCreate >= 1) {
boxesToCreate -= 1;
boxesMarkup += '<div class="box"></div>';
createBoxes(boxesToCreate);
} else {
$('.container').append(boxesMarkup);
colourBoxes();
}
}
function colourBoxes() {
$('.box').each(function() {
$(this).css('background-color', '#' + Math.floor(Math.random() * 16777215).toString(16));
});
}
createBoxes(200);
.container {
position: relative;
line-height: 1px;
}
.box {
width: 10px;
height: 10px;
background-color: #000;
display: inline-block;
vertical-align: top;
line-height: 1px;
letter-spacing: 0;
font-size: 1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coloured Boxes</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
</div>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</body>
</html>
Use float:left; instead of display:inline-block;
.box {
width: 5px;
height: 5px;
background-color: #000;
float: left;
vertical-align: top;
}
Maybe a margin or padding issue?
If you "inspect" the element, what are the "box properties"?
Or maybe you have some content (even only spaces) inside the div, which might trigger this behavior
.box {
width: 5px;
height: 5px;
background-color: #000;
float: left;
vertical-align: top;
}
Related
I'm trying to create a simple chrome extension that allows the user to set a minimum font size that can be displayed on a web page (this is useful for visually impaired people that cant see small font sizes)
The extension will just look through the web page and if there's any font set lower than the user specified minimum font size, if so then the font size will be increased accordingly.
My problem occurs whilst using the extension UI (the popup).
I want the letters 'abc' to be in the very centre of the box, vertically and horizontally, but whenever I press the increase font size button the letters 'abc' move off centre, even the text is aligned centre, line height is specified and vertical align is set to middle.
Any ideas? Thanks :)
var FS = 20;
var abc = document.getElementById("tester");
var SmlBtn = document.getElementById("SizeMns");
var BigBtn = document.getElementById("SizePls");
if(SmlBtn != null){
SmlBtn.addEventListener('click', function() {
FS = FS - 1;
console.log(FS);
abc.style.fontSize = FS;
chrome.storage.sync.set({'fontSize': FS}, function() {
// Notify that we saved.
console.log('your font size has been saved to ' + FS.toString());
});
});
}
if(BigBtn != null){
BigBtn.addEventListener('click', function() {
FS = FS + 1;
console.log(FS);
abc.style.fontSize = FS;
chrome.storage.sync.set({'fontSize': FS}, function() {
// Notify that we saved.
console.log('your font size has been saved to ' + FS.toString());
});
});
}
html {
text-align: center;
width: 290px;
height: 590px;
}
body {
position: relative;
overflow-x: hidden;
overflow-y: auto;
display: inline-block;
min-height: 200px;
max-height: 590px;
min-width: 285px;
max-width: 290px;
margin: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-family: 'Segoe UI', 'PT Sans', 'Helvetica Neue', 'FreeSans', sans-serif;
font-size: 20px;
font-weight: 400;
color: #43435e;
text-align: center;
background: #ffffff;
cursor: default;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.header {
display: block;
background-color:#00b7f1;
color: #;
padding:;
height:50px;
line-height: 46px;
font-size:25;
font-weight:600
}
.content {
position: fixed;
bottom: 0;
width: 290px;
height: 46px;
line-height: 40px;
padding: 0px;
background-color: rgba(0,0,80,0.6);
}
#tester {
vertical-align: middle;
text-align: center;
display: table-cell;
vertical-align: middle;
padding:;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<div class="header">Increase Font Size</div>
<p id="tester" font-size="FS">abc</p>
<div class="content">
<button type="button" id="SizeMns">-</button>
<button type="button" id="SizePls">+</button>
</div>
<script src="popup.js"></script>
</body>
</html>
You may try sth like I quickly implemented in codePen, it will keep font vertically and horizontally aligned.
http://codepen.io/kmlzjc/pen/bZKrpx
Basically to align vertically the 'abc' label, you need a reference box to which heights this label will be aligned. I create it with :before attribute in my code example, but you could just put a or whatever in #tester before 'abc' text and style it the same way as :before is styled and you will accomplish the same thing.
.tester:before {
content: ' ';
display: inline-block;
width: 0;
height : 100%;
vertical-align: middle;
}
the box has 100% heights of its parent, which is #tester . I put #tester position to be absolute and have full height of .wrapper so you may change the height of the widget just by setting height of the wrapper, 'abc' will always be in the middle of .wrapper and .tester height.
Nevertheless, now when you change the size of the font then abc will be centered vertically and horizontally, I hope it is what you wanted to accomplish.
So you may try changing font size in .tester class in my example to see 'abc' being automatically aligned.
you can try this
<body align="center">
<p id="tester" font-size="FS">abc</p>
</body>
I want to place chevron-up and chevron-down icons very close to a number, I just can't do it correctly, please help.
This is what I have:
▲
5 Read Post
▼
I want the arrows to be closer to the number (very close). I've arrived to a partial solution, but the problem comes when the number is bigger, I want the arrows to be in the middle of the number, but I get something like this:
▲
534 Read Post
▼
The "partial solution" I have is available in this fiddle.
Also, I can't align a text "Read Post" to the vote's number, you will see in the fiddle.
I'm a backend developer and for now, terrible at CSS, I'd appreciate it if someone can explain me a little about what am I doing wrong.
You could do something like this: http://codepen.io/pageaffairs/pen/aGcyE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<style>
p {
width: 340px;
height: 50px;
font-weight: bold;
}
a, span {display: inline-block; vertical-align: middle;}
span {position: relative; padding: 20px 0;}
span::before, span::after {
position: absolute;
display: block;
width: 100%;
text-align: center;
font-family:'FontAwesome';
}
span::before {
content: "\f077";
top: 0;
}
span::after {
content: "\f078";
bottom: 0;
}
</style>
</head>
<body>
<p><span>255</span> Read Post</p>
</body>
</html>
Using the <p> tag is probably what is forcing your text on to the next line, I would suggest to use divs with float:left, text-align:center and auto margins.
Based on your fiddle, I changed it to this as a starting point, hopefully you can adjust it from here:
HTML:
<a class = "link_wrapper">
<span class = "votes_post">
<i class = "up fa fa-chevron-up"></i>
<div>
255
</div>
<i class = "down fa fa-chevron-down"></i>
</span>
<div class = "text">Read Post.</div>
</a>
CSS:
.link_wrapper{
width: 340px;
height: 50px;
font-weight: bold;
}
.votes_post{
height: 40px;
width: 40px;
float: left;
text-align: center;
}
.votes_post i {
font-weight: lighter;
}
.votes_post div {
margin-left: auto;
margin-right: auto;
}
.text{
width: 300px;
height: 40px;
margin-top: 17px;
margin-left: 5px;
font-weight: bold;
float: left;
}
I've generated some labels using HTML and CSS which I intend to print onto to pre-printed label paper. The labels should have a fixed width of 45mm * 35mm, which I've set in CSS, but when printed they come out at different sizes.
I've also tried converting the HTML to a PDF using HTML to PDF, but this hasn't helped. What am I doing wrong?
My Html:
<html>
<head>
<style>
#media screen , print {
body {
margin: 0;
border: 0.264583333mm solid green;
}
.table_style {
width: 100%;
}
.table_style td {
text-align: left;
padding: 0 0 3.175mm 5.291666667mm;
}
.space {
height: 2.645833333mm;
}
.div_print {
width: 63mm;
height: 37.735416667mm;
margin-top: 3.735416667mm;
border-width: 1px;
border-style: solid;
border-color: red;
}
.part_dec_print {
font: 3mm arial;
text-align: left;
padding-left: 1.5875mm;
height: 8.5mm;
}
.p_tag {
height: 100%;
vertical-align: middle;
padding-top: 1.5875mm;
}
.qty_span {
padding-top: 1.5875mm;
}
.part_print {
font: 6.5mm arial;
height: 6.5mm;
text-align: left;
padding-left: 1.5875mm;
}
.bar_print {
padding-left: 3.96875mm
}
.qty_print {
font: 6.5mm arial;
text-align: center;
height: 6.5mm;
}
.date_print {
font: 2mm arial;
text-align: right;
padding-right: 4.645833333mm;
margin-top: 4.995833333mm;
height: 2mm;
}
}
</style>
</head>
<body cz-shortcut-listen="true">
<div class="div_print">
<div class="part_dec_print">
<div class="p_tag">REAR FABRIC SCVR</div>
</div>
<div class="part_print">PZQ22-12100</div>
<div class="bar_print">
<img alt="testing" src="http://anybarcode_image_here201x29.png">
</div>
<div class="qty_print">1</div>
<div class="date_print">23A4</div>
</div>
If the problem is differences between browsers (as I think it is now from your comments), then the issue is that your widths include fractional measurements, e.g. 4.645833333mm.
Each browser round decimals slightly differently as discussed here - there's no guaranteed away around it other than to not include fractional widths.
What about creating a PDF in PHP (with something like dompdf) and then styling the PDF so it has the correct widths and heights for your label cells. The PDF and styled formatting should always be the same size no matter the browser.
From device preferences, you have to set page size according to your label and it will work. I just did it for TSC TA210 device!
page size css never work in this case! it will print lots of empty label for you.
Whenever I click on the checkbox, the browser window (firefox) will scroll on the top of the screen.
How can I prevent this behavior so when I click on the checkbox the browser window will not scroll on top?
Here is the code found from here http://jsfiddle.net/zAFND/6/
Thank you.
<html>
<head>
<title>Test</title>
<style>
div label input {
margin-right: 100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button:hover {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid red;
overflow: auto;
float: left;
color: red;
}
#ck-button label {
float: left;
width: 4.0em;
}
#ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
#ck-button label input {
position: absolute;
top: -20px;
}
#ck-button input:checked + span {
background-color: #911;
color: #fff;
}
</style>
</head>
<body>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
</body>
The problem is this rule:
#ck-button label input {
position:absolute;
top:-20px;
}
When you click on a label the browser tries to focus the related input. In your case the checkbox element is lying at the top of the page, even outside the viewport – so Firefox tries to scroll there.
You can solve it like this by adding:
#ck-button label {
display: block;
position: relative;
overflow: hidden;
}
Demo
Try before buy
Alternative
Heisenberg points out a problem in his answer which can occur when using extreme values. Unfortunately the proposed idea has the same quirk as the one shown above.
So an alternative solution is simply to hide the input. The functionality is not affected.
CSS
#ck-button label input {
display: none;
}
Demo
Try before buy
The answer accepted is not entirely true. Works, but not in all cases.
If you use the common css to hide elements (probably -999em or similar) at the "top" attribute, in this case position:relative has nothing to do because always -999em will be much higher than the viewport.
The answer accepted works fine because the "top" is only -20px . Try to set it a more higher number and you´ll see the problem.
So, the solution is not to set a relative position.
I think the correct way is only to set a negative value at left position (not top).
Try it. :)
you could hide your checkbox input like this:
#ck-button label input {
position:absolute;
top:+20px;
visibility: hidden;
}
BACKGROUND:
I would like to have small labels in columns of a table.
I'm using some implemented parts of HTML5/CSS3 in my project, and this section specifically is for mobile devices. While both facts are not necessarily relevant, the bottom line is that I don't have to support Internet Explorer or even Firefox for that matter (just WebKit).
THE PROBLEM
With my current CSS approach, the vertical padding of the cell comes from the <span> element (set to display: block with top/bottom margins), which contains the "value" of the column. As a result there's no padding when the <span> is empty or missing (no value) and the label is not in place.
The "full" coulmns should give you the idea of where I want the labels to be, even if there's no value, and the <span> is not there.
I realize that I could use "non-breaking-space", but I would really like to avoid it.
I wonder if any of you have a fix / better way to do this? current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ah</title>
<style>
body {
width: 320px;
}
/* TABLE */
table { width: 100%; border-collapse: collapse; font-family: arial; }
th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
th:last-child, td:last-child { border-right-width: 1px; }
tr:first-child th { border-top-width: 1px; background: #efefef; }
/* RELEVANT STUFF */
td {
padding: 3px;
}
td sup {
display: block;
}
td span {
display: block;
margin: 3px 0px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">something</th>
</tr>
<tr>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span></span></td><!-- No content, just a label -->
</tr>
</table>
</body>
</html>
As above, you can use:
td {
padding: 3px;
vertical-align:top;
}
If you wanted to retain the padding exactly, even on the invisible elements, you can force the hasLayout attribute on the empty span using:
td {
padding: 3px;
vertical-align:top;
}
td sup {
display: block;
}
td span {
display: inline-block;
margin: 3px 0px;
text-align: center;
width:100%;
}
The inline-block technique is discussed extensively at Drawing empty inline boxes in CSS?