I'm attempting to designate a small section of text on my mobile webpage as the only part to be printed, specifically on a 62mm x 52mm brother label printer label.
Below is the CSS I've implemented:
@page {
size: 62mm 52mm;
margin: 0;
}
.print:last-child {
page-break-after: auto;
}
@media print {
.no-print, .no-print * {
display: none !important;
}
body * {
visibility: hidden;
}
.page, .page * {
visibility: visible;
}
.page {
position: absolute;
left: 0px;
top: 0px;
display:block;
margin-right:auto;
margin-left:auto;
height: 99%;
padding: 0;
transform: rotate(270deg);
}
}
To differentiate between what should not be printed and what should be printed, I utilize the "no-print" class for elements to exclude from printing and the "page" class for the specific content intended for printing.
<div class="page" data-role="content" >
<p align="center"><?php echo $_SESSION['prod_name'];?></p>
<p align="center">#<?php echo $_SESSION['prod_no'];?></p>
<p align="center" ><?php echo date("d / m / y",strtotime($_SESSION['date']));?></p>
<br>
<p align="center"><?php echo $_SESSION['result1'];?></p>
<p align="center"><?php echo $_SESSION['result2'];?></p>
</div>
After exploring various solutions and initially suspecting a JQuery Mobile issue, I made an unexpected discovery when applying the class to a paragraph instead of a div, resulting in single-page printing, unlike the multiple pages produced by the div.
Am I overlooking a simple solution here? Have I approached this incorrectly, or could it possibly be a known bug related to JQuery Mobile?
Despite utilizing developer tools in different web browsers to pinpoint padding or margin discrepancies, I find myself at a standstill. Any assistance would be greatly appreciated. Thank you.