I have a printing page in a website that prints labels for shoes as the picture shows. This had been working for more than 3 years. Two days ago, this broke as shown, the labels or page-break-after stopped working properly.
I looked online but could not know what went wrong.
The correct behaviour is to view each label in a page, so the label printer can print it correctly.
Code:
CSS
h1, h3, h2, h4 {
margin-bottom: 1px;
}
h6 {
margin: 0px;
direction: ltr;
}
.col-4, .col-2, .col-8 {
padding: 1px;
}
#page {
size: 10cm 5cm;
margin: 0.2cm;
}
img {
width: 95%;
height: 60px;
}
p.att-value {
font-family: 'Almarai', sans-serif;
font-size: larger;
margin: 0;
padding: 2px;
}
span.value-block {
background-color: black;
color: white;
padding: 5px;
}
.a-label {
height: 10cm;
width: 5cm;
padding-top: 5px;
padding-right: 30px;
margin-bottom: 0.1cm;
}
#media print{
html, body {
width: 10cm;
height: 5cm;
}
.pagebreak {
break-inside: avoid;
break-after: page;
}
}
<div class="a-label">
<div class="row">
<div class="col-12 text-center">
<img src="https://i.stack.imgur.com/FxCHC.png">
<h6>123456</h6>
</div>
</div>
<div class="row">
<div class="col-12">
<h3>Shoe Name</h3>
<p class="att-value">
<span class="value-block">Product Name</span>
<span class="value-block">Size: 36</span>
<span class="att-value"> 250 usd</span>
</p>
</div>
</div>
</div>
<div class="pagebreak"></div>
<div class="a-label">
<div class="row">
<div class="col-12 text-center">
<img src="https://i.stack.imgur.com/FxCHC.png">
<h6>123456</h6>
</div>
</div>
<div class="row">
<div class="col-12">
<h3>Shoe Name 2</h3>
<p class="att-value">
<span class="value-block">Product Name</span>
<span class="value-block">Size: 36</span>
<span class="att-value"> 250 usd</span>
</p>
</div>
</div>
</div>
<div class="pagebreak"></div>
This feature broke on all browsers
It worked after I updated to the latest bootstrap, specifically version 5.
It is unclear to me why it broke suddenly. This feature worked 3 years.
So, the comment from #AndrewMorton was helpful. The credit goes to him.
Related
This is a wordpress site http://www.jokerleb.com
Each cell has the following code
.post-block-out {
margin: 0 0 8px 0;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.post-block-out {
background: #fff;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 2px 0 0 #E3E4E7;
}
div{
display: block;
}
post-block {
background-color: #fff;
margin: 0;
padding: 20px 15px 15px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.post-block-out, .searchblock, .paging, .sidebar-block {
background: #fff;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 2px 0 0 #E3E4E7;
}
.content_res {
width: auto;
}
.content_left{
width:30%;
float: none;
margin: auto;
padding: auto;
}
<div class="content_res">
<div class="content_left">
<div class="post-block-out ">
<div class="post-block">
<div class="post-left">
<img class="attachment-ad-medium" alt="" title="" src="http://www.jokerleb.com/wp-content/themes/classipress/images/no-thumb-150x150.png">
</div>
<div class="post-right full">
<div class="tags price-wrap">
<span class="tag-head"><p class="post-price">$1600$</p></span>
</div>
<h3>Kyosk 2m×2m</h3>
<div class="clr"></div>
<p class="post-meta">
<span class="dashicons-before folder">Other Home & Garden</span> <span class="dashicons-before owner">Charbel</span> <span class="dashicons-before clock"><span>August 25, 2017</span></span>
</p>
<div class="clr"></div>
<p class="post-desc">Kyosk ma3moul la snack fi haute rekeb fi madfouf PVC ma3 inaraaa</p>
<p class="stats">23 total views, 0 today</p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div><!-- /post-block -->
</div>
</div>
</div>
that snippet is affecting every box on the page, they are now aligned in the middle. I want them to be 3 columns per row.
No bootstrap or any grid library because it's affecting the theme, i guess maybe because it has a class called container, so when using bootsrap, the container centers everything. If you know a library that doesn't conflict with the existing code I'd use it.
It's a very old wordpress theme, many of the styles are stored in the database so if I need to add class I might have to do it in jquery
http://jsfiddle.net/tusharj/ucb0bdmj/
Don't worry about it. And you'll see on the website duplicate css code, don't worry about it, I use a plugin to manage css in the development phase, the code I don't want is display:none
All I want is 3 columns on each row. I tried to add float the first left and the third right but the problem is that they move only within their container.
Plus I don't know where to place <div class='row'>, I was trying to do it with bootstrap just to see if it would work, I didn't spot the correct place to create new row
If this is what you expect
Follow this to make it work:
Remove width: 30% of class .content_left
Add display: flex; flex-wrap: wrap; to block you want to show. (In this case was the div with id="block1"
Add width of 33% for each div with class post-block-out
You can try to add some margin or padding to make the gap between divs.
important: I guess this is better than use floats if you want to avoid conflicts. And, if you want to make it responsive, just use media queries and add width: 100%; to each div with class post-block-out
You can try this responsive solution:
* {margin: 0; padding: 0; box-sizing: border-box}
.content-left {
position: relative;
width: 1200px;
max-width: 100%;
margin: 0 auto;
column-count: 3;
column-gap: 10px;
}
.content-left > .post-block-out {
position: relative;
margin-bottom: 10px;
page-break-inside: avoid;
break-inside: avoid-column;
box-shadow: 0 0 1px #000;
}
.content-left > .post-block-out > img {
display: block;
width: 460px;
max-width: 100%;
}
.content-left > .post-block-out > .info {
display: flex;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 10px;
color: #fff;
background: #000;
opacity: .75;
}
.content-left > .post-block-out > .info > span {
margin: 0 5px;
}
.content-left > .post-block-out > .info > .title {
text-transform: uppercase;
}
#media (max-width: 1200px) {
.content-left {padding: 0 10px}
}
#media (max-width: 768px) {
.content-left {column-count: 2}
}
#media (max-width: 480px) {
.content-left {column-count: 1}
}
<div class="content-left">
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/themes/classipress/images/no-thumb-150x150.png" alt="">
<div class="info">
<span class="title">Kyosk 2m x 2m</span><span class="price-tag">$1,600.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-250x250.jpeg" alt="">
<div class="info">
<span class="title">Apartment For Sale in JBEIL</span><span class="price-tag">$180,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/118310-250x250.jpg" alt="">
<div class="info">
<span class="title">Apartment for sale in Adonis</span><span class="price-tag">$230,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/655212-250x250.jpg" alt="">
<div class="info">
<span class="title">Duplex for sale in Al Ghiye</span><span class="price-tag">$125,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/584970-250x250.jpg" alt="">
<div class="info">
<span class="title">Honda CRV 2012</span><span class="price-tag">$19,999.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/628582-250x250.jpg" alt="">
<div class="info">
<span class="title">Malinois puppies For Sale</span><span class="price-tag">$900.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/565460-250x250.jpg" alt="">
<div class="info">
<span class="title">Villa for Sale in Chabtin</span><span class="price-tag">$225,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/53048-250x250.jpg" alt="">
<div class="info">
<span class="title">Shop for Sale in Ain el Roumani</span><span class="price-tag">$140,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/601563-250x250.jpg" alt="">
<div class="info">
<span class="title">Honda CRV</span><span class="price-tag">$ ???</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/484415-250x250.jpg" alt="">
<div class="info">
<span class="title">Apartment in dekwaneh For Rent</span><span class="price-tag">$700.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/4610-250x250.jpg" alt="">
<div class="info">
<span class="title">Nissan Pathfinder</span><span class="price-tag">$5,000.00</span>
</div>
</div>
<div class="post-block-out">
<img src="http://www.jokerleb.com/wp-content/uploads/2017/05/667783-250x250.jpg" alt="">
<div class="info">
<span class="title">Land for sale at Ain Kfaa<br>(عين كفاع)</span><span class="price-tag">$100,000.00</span>
</div>
</div>
</div>
.content-left {width:100%; }
.post-block-out { float:left; width:33% }
I searched for a long while, but all of them said to give a width, make display block, and set text-align.
I maked this for welcome card.
It also worked for the first card too.
But it doesn't work for second card Icon and text.
First one works, but second doesn't:
<div class="mdl-grid" id="sub-content">
<!--First Card-->
<div class="mdl-cell mdl-cell--4-col main-card-medium mdl-shadow--2dp">
<i class="sub-icon material-icons slideanim">book</i>
<div class="mdl-card__title slideanim">
<h2 class="mdl-card__title-text subcontent-title">All-Inclusive</h2>
</div>
<div class="mdl-card__supporting-text subcontent-title slideanim">
This app contains all info about Champions, Summoners, Items, Runes and Masteries.
</div>
</div>
<!--Second Card-->
<div class="mdl-cell mdl-cell--4-col main-card-medium mdl-shadow--2dp">
<i class="sub-icon material-icons slideanim">wifi_perm</i>
<div class="mdl-card__title slideanim">
<h2 class="mdl-card__title-text subcontent-title">Test Your Ping</h2>
</div>
<div class="mdl-card__supporting-text subcontent-title slideanim">
You can check your ping for all servers.
</div>
</div>
</div>
CSS:
.main-card-medium {
width: 25%;
display: block;
}
.mdl-cell--4-col {
margin: auto;
}
.sub-icon {
font-size: 100px;
margin: 30px 0px;
color: #3f51b5;
width: 100%;
display: inline-block;
text-align: center;
}
.sub-content {
background: #3E4EB8;
}
.subcontent-title {
width: 100%;
text-align: center;
display: block;
}
.mdl-cell--12-col {
height: 100%;
width: 100%;
text-align: center;
}
EDIT: Updated fiddle with both suggestions: https://jsfiddle.net/2kz7tbnu/1/
This happens because you have a width on the card just remove the width and it will be centered
/*width: 25%*/
here is a jsfiddle
The text in your .material-icons element is too long to be contained within the width you've set the parent element to. Alternatively, you could set the width on elements nested within the parent element as needed, rather than the parent element itself.
.main-card-medium {
width: 100%;
display: block;
}
.main-card-medium > div {
width: 25%;
margin: auto;
}
.mdl-cell--4-col {
margin: auto;
}
.sub-icon {
font-size: 100px;
margin: 30px 0px;
color: #3f51b5;
width: 100%;
display: inline-block;
text-align: center;
}
.sub-content {
background: #3E4EB8;
}
.subcontent-title {
width: 100%;
text-align: center;
display: block;
}
.mdl-cell--12-col {
height: 100%;
width: 100%;
text-align: center;
}
<div class="mdl-grid" id="sub-content">
<!--First Card-->
<div class="mdl-cell mdl-cell--4-col main-card-medium mdl-shadow--2dp">
<i class="sub-icon material-icons slideanim">book</i>
<div class="mdl-card__title slideanim">
<h2 class="mdl-card__title-text subcontent-title">All-Inclusive</h2>
</div>
<div class="mdl-card__supporting-text subcontent-title slideanim">
This app contains all info about Champions, Summoners, Items, Runes and Masteries.
</div>
</div>
<!--Second Card-->
<div class="mdl-cell mdl-cell--4-col main-card-medium mdl-shadow--2dp">
<i class="sub-icon material-icons slideanim">wifi_perm</i>
<div class="mdl-card__title slideanim">
<h2 class="mdl-card__title-text subcontent-title">Test Your Ping</h2>
</div>
<div class="mdl-card__supporting-text subcontent-title slideanim">
You can check your ping for all servers.
</div>
</div>
</div>
As #Lemnis said, It is only problem for wifi-perm icon. I changed it to wifi and it worked. And about the secondary text, I changed width to 90% and now it's aligned. Thanks all!
Apologies if this has been asked and answered already, as I was not able to find an appropriate solution to this problem.
I need to work on a site navigation that require some numbers to be placed inside circles. The circles will increase in diameter based on the length of the text inside. I'm looking for a very elegant, preferably css only solution for this. Please note the alignment of the circles here with respect to the entire row and label text on the mock up attached.
It required some CSS trickery to get this working, but this works in the latest version Chrome and Firefox. Let me know if you have any other questions.
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #9653DA;
font: 600 14px sans-serif;
}
.nav-table {
display: table;
text-align: center;
}
.nav-row {
display: table-row;
}
.nav-col {
display: table-cell;
}
.text {
margin: 1em;
}
.icon {
display: inline-block;
border-radius: 100%;
border: 2px solid;
min-width: 10px;
padding: 0.5em;
margin: 0.5em;
}
.icon div {
position: relative;
height: 0;
padding: 50% 0;
top: -7px; /* Half of font-size, in our case it is (14px / 2) */
}
<div class="nav-table">
<div class="nav-row">
<div class="nav-col">
<div class="icon">
<div>20</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>300</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>50</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>1</div>
</div>
</div>
</div>
<div class="nav-row">
<div class="nav-col">
<div class="text">Japanese</div>
</div>
<div class="nav-col">
<div class="text">Main Course</div>
</div>
<div class="nav-col">
<div class="text">Non Vegetarian</div>
</div>
<div class="nav-col">
<div class="text">Beginners</div>
</div>
</div>
</div>
I have found the following solution for aligning an img vertically within a div
https://stackoverflow.com/a/7310398/626442
and this works great for a basic example. However, I have had to extend this and I want a row with two bootstrap col-md-6 columns in it. In the first column I want a 256px image, in the second I want a h1, p and a button. I have to following HTML:
<div class="home-costing container">
<div class="row">
<div class="frame">
<span class="helper"></span>
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" />
</div>
<div class="col-md-6">
<h2>Header</h2>
<p>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br /><br/>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</p>
<a class="btn btn-default"
href='#Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
and the following CSS:
.home-costing {
color: #fff;
text-align: center;
padding: 50px 0;
border-bottom: 1px solid #ff6500;
}
.home-costing h2 {
text-transform: uppercase;
font-size: 60px;
}
.home-costing p {
font-size: 18px;
}
.home-costing .frame {
height: 256px;
width: 256px;
border: 0;
white-space: nowrap;
text-align: center;
margin: 1em 0;
}
.home-costing .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.home-costing img {
vertical-align: middle;
max-height: 256px;
max-width: 256px;
}
The problem is that now the second column is no longer contained and the text does not wrap and goes off to the right.
How can I center align my image in the first column with the text in the right column and still get the correct wrapping in the second column?
Fiddler: https://jsfiddle.net/Camuvingian/1sc40rm2/2/
Your HTML needed updated, in Bootstrap, the div order should ALWAYS go .container > .row > .col- * - *, your code however went .container > .row > .frame > .col- * - *. I have corrected your HTML and now your code works.
HTML:
<div class="home-costing container">
<div class="row">
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" class="center-block" />
</div>
<div class="col-md-6">
<h2>UserCost</h2>
<p>Hello, I'm a paragraph</p>
<a class="btn btn-default"
href='#Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
Link to finished code example:
Codepen - Updated & working code
This fixes the word wrap issue also on the p tag.
CSS:
p {
font-size: 18px;
word-wrap: break-word;
}
Please see the first image below.
This is working great and is how I want it to look. However when the browser resizes it then looks like this.
As you can see the white background of the text block is bigger than of the image block. I want the image block to be the same height as the text block but unfortunately this is not working. I am using Bootstrap 3 to develop this and you can see my code for this below:
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-12">
<div class="col-sm-3" style="padding:0;">
<img src="core/img/abb[square].jpg" class="img-responsive">
</div>
<div class="col-sm-9" style="background:#fff; height:218px; padding:7px 25px;">
<h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2>
<p>Text content, summary of page here.</p>
Subscribed <i class="glyphicon glyphicon-ok" style="margin-left:4px;"></i>
</div>
</div>
</div>
Any help would be much appreciated. As you can see I have manually defined the height on <div class="col-sm-9"> and set height:218px. This obviously will not work dynamically as the page resizes.
Summary: I am looking for an effective way of making sure the height of the text block is the same as the image block using bootstrap 3.
Okay, this is with intrinsic ratios, it's not like the comments I made. However, the comment about the rows and columns and nesting are correct.
DEMO: http://jsbin.com/zodama/1/
http://jsbin.com/zodama/1/edit
Requires: jquery.matchHeight-min.js
https://github.com/liabru/jquery-match-height
jQuery (when the script is installed):
$(document).ready(function() {
$('.my-row [class*="col-"]').matchHeight();
});
The CSS, some of which is the aspect ratio and some of which is Bootstrap grid manipulation based on intimate knowledge of how it works.
.my-row {
border: 10px solid #ddd;
margin-left: 0;
margin-right: 0;
margin-bottom: 3%;
text-align: center;
}
.image img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.my-row [class*="col-"] {
padding:0 0 10px 0;
}
#media (min-width:768px) {
.my-row {
border: 10px solid #ddd; /* remove this it's in the global */
text-align: left;
}
.my-row [class*="col-"] {
padding: 0;
min-height: 220px;
}
.my-row [class*="col-"]:last-child {
padding-left: 20px;
padding-bottom: 20px;
}
.image img {
display: block;
width: 100%;
height: 100%;
margin: auto;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
.image img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.image {
position: relative;
height: 0;
padding-top: 56.25%;
}
}
#media (min-width:992px) {
.my-row [class*="col-"] {
min-height: 250px;
}
}
#media (min-width:1200px) {
.my-row [class*="col-"] {
min-height: 275px;
}
}
HTML
<div class="container">
<div class="row my-row">
<div class="col-sm-4 col-md-3 image">
<img src="http://lorempixel.com/320/320/sports"/>
</div>
<div class="col-sm-8 col-md-9">
<h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2>
<p>Text content, summary of page here.</p>
Subscribed <i class="glyphicon glyphicon-ok"></i>
</div>
</div>
<div class="row my-row">
<div class="col-sm-4 col-md-3 image">
<img src="http://lorempixel.com/320/320/city"/>
</div>
<div class="col-sm-8 col-md-9">
<h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2>
<p>Text content, summary of page here.</p>
<p>Text content, summary of page here.</p>
<p>Text content, summary of page here.</p>
<p>Text content, summary of page here.</p>
<p>Text content, summary of page here.</p>
Subscribed <i class="glyphicon glyphicon-ok"></i>
</div>
</div>