I am currently facing an issue with generating a batch of QR codes using the SimpleQR code generator in Laravel blade template on the fly for printing. The problem arises when a page break occurs, as it breaks the QR code. I attempted to use the break-inside property to avoid this issue, but unfortunately, it did not resolve the problem. One solution that I came across suggested setting the display property to block due to the use of flex box, however, this also did not work as expected on the parent div surrounding the SVG. The snippet of my current code is as follows:
@media print{
div{
break-inside: avoid !important;
}
}
</style>
<div class="container">
<div class="text-center" style="margin: 2em">
<div class="btn btn-info add-new" id="printbtn" onclick="printDiv()" value="Print QR"> Print</div>
</div>
<div class="row">
@foreach ($items as $item)
<div class="col" id="print1" >
<div class="visible-print text-center" style="padding: 1em">
{!! QrCode::size($height)->generate(url('/product/show/' . $item->id)) !!}
<p><small>{{ $item->material_id }}</small></p>
</div>
</div>
@endforeach
</div>
</div>
Screenshot