CSS page-break-after not working when printing Angular Material dialog

Question

I have an angular material dialog box that I wish to print out.

I have placed as explained here (Can I force a page break in HTML printing?) a page break div like so:

@media print {
  .pagebreak { page-break-before: always; }
}

When I do this, the page break is ignored.

I have tested the printing by placing the exact same HTML on a different non-dialog page and it does indeed work as expected.

Is there a way to over-ride the dialog css when printing to allow the page break to work? I think it has something to do with box-sizing as can be seen by the answer of Yuri here: CSS Page-Break Not Working in all Browsers

I read on dev mozilla: This property has been replaced by the break-after property. --> link break-after: https://developer.mozilla.org/en-US/docs/Web/CSS/break-after . hope help you — MaGiO, Mar 19 '20 at 15:29
@MaGiO This doesn't work - sorry for the slow response - been off sick with the corona — Tom O'Brien, Apr 03 '20 at 09:46

score 0 · Answer 1 · answered Mar 22 '20 at 09:56

0

As on https://developer.mozilla.org/en-US/docs/Web/CSS/break-before

For compatibility reasons, the legacy page-break-before property should be treated by browsers as an alias of break-before

page-break-before is a legacy property, try with break-before

answered Mar 22 '20 at 09:56

alexrogers

1,514
1
16
27

This didn't work - sorry for the the slow response, been off sick with the corona :( – Tom O'Brien Apr 03 '20 at 09:45

score 0 · Answer 2 · edited Aug 28 '20 at 02:35

I used page brake in angular component in below way. Apply the style page-brake-before:always inside div tag and this needs to be used inside a table tag. separate with the table tags whenever you want to brake the page. Hopefully it helps!

app.component.html:
        <button mat-icon-button class="float-right" tabindex="-1">
         <mat-icon (click)="printROE()">print</mat-icon> </button>
        
        app.component.ts:
            printROE(): void {
            const w = window.open();
            
            let printHtml = '<html><head><style>.inner-text{font-family: "Open Sans", sans-serif;font-size: 10pt;text-align: justify;}' +
                  '</style></head><body style="position:relative;">';
            
             printHtml += '<table width="100%" class="inner-text"><thead><title style="font-size:10pt;" align="center"></title></thead><tbody></tbody><tfoot></tfoot></table>';
            
             reportHtml += '<table width="100%" class="inner-text"><tr><div style="page-break-before: always;"></td></tr> </div></tr></table>';
            
            printHtml += reportHtml + '</body><footer></footer></html>';
             w.document.write(printHtml);
                w.document.close();
            
                setTimeout(() => {
                  w.focus();
                  w.print();
                  w.close();
                }, 900);
              }

CSS page-break-after not working when printing Angular Material dialog

2 Answers2