For over 3 years, a website has been successfully printing labels for shoes. However, the functionality suddenly broke two days ago, specifically the labels or page-break-after feature stopped working correctly.
Despite searching online, I was unable to determine the cause of this issue.
The expected behavior is for each label to be displayed on its own page so that the label printer can accurately print it.
Here is the CSS code snippet:
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.sstatic.net/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.sstatic.net/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 issue is present across all browsers.