'css page-break-after:always works on first page but not on the others.All i want to fill half of all pages

Here is my html:

<div class="rack-label" *ngFor="let product of productsToPrint;let indexOfElement=index;let l=count; " > 
   
    // Showing barcodes here
    
    <div *ngIf="(indexOfElement+1)%12==0" class="row-footer"> 
      // And i want to page-break-after works here
      // cuz i am showing barcodes 
    </div>
  </div>

`

And here is my css to print page:

@media print {
    @page{
        margin:3mm 0mm 2mm 3mm;
        border: 1px solid red;
        /* height: 210mm;
        width: 148.5mm; */
        size:A4;
        margin: 0;
    }
      html{ 
          border: 1px solid yellow;
      }
      body
      {
          width: 210mm;
          height: 297mm;
          display: grid;
          grid-template-columns: 9cm 9cm 9cm;
          grid-template-rows:auto auto auto;
      }
       .row-footer{
           clear: both;           page-break-before: always;
           page-break-inside: avoid;
      }
}

Or is there anyway to fix this issue ? Actually all i want to do print 3 col 4 rows barcode to an A5 page.But its not working on ng-print.So i want to do set is as A4 and let space to half of page.

page-break


Solution 1:[1]

The problem seems to be that absolute positioned elements don't take up any space. Chromium seems to be considering the page essentially blank, so a new page is not necessary.

I've address the issue by giving a minimal size to the relative positioned elements that contain the absolute positioned elements.

I cannot reproduce your example, because I do not know what you are inserting for the barcodes, and your non-printing styles may also be impacting it, but here is an example that produces the problem, and a solution.

Problem, the HTML below will all print on the same page (sometimes, it breaks after first page):

<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0" > 
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>

The divs with relative positioning are all zero size, and the absolute positioned elements inside of it don't impact the size. Adding a 1mm width and height, gives proper page breaks

<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" > 
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Garr Godfrey

Related Questions