@media print { div.page-break { page-break-after: auto; } not working

[Vaibhav273]

<ng-container *ngFor="let item of data; let i = index;">
                        <div class="col-12 page-break" *ngIf="i % 4 === 0">Next Page</p>
                        <div class="col-md-6 border-rightSide">
                           
                        </div>
                    </ng-container>

want page break after every .page-break Class ? Ngx-Print Version "ngx-print": "^1.2.1",

Additional context Add any other context about the problem here.

[SegoviaDiego]

Same here, we want to do a page-break after a component. Did you find a solution to this?

[Vaibhav273]

No I can't, if have any solution then please let me know

[Kraloz]

You should try checking if the html tag has a display: flex styling (that was my case)

How to inspect the html elements of the popup if closing the printing window also closes the popup window? (default behaviour of ngxPrint)

Well, here is my little workaround:

• When the printing popup opens, press F12 and go to the console
• replace the onbeforeunload event: window.onbeforeunload = () => "Are you sure?"
• go to the print window, close if and then press cancel when the browser shows you an alert
• now you can start playing with styling inside your browser and test how the print looks like by pressing cntrl+p

[coolitnow]

@Kraloz are you saying you need to add flex? or ngx-print doesn't work with flex?

I am having trouble transferring my layout and am using flex, do you have to use block with ngx-print? Following your instructions, it looks like it overrides with block

[coolitnow]

I am having trouble transferring my layout and am using flex, do you have to use block with ngx-print? Following your instructions, it looks like it overrides with block

Turns out it was having trouble with the :host ::ng-deep my company uses. When the @media print styles were placed outside of :host ::ng-deep, the styles are applied