CODEWITHSUNDEEP
htmlcssgoogle-chromeprintingpage-break
Am Novice
Am Novice

Reputation: 325

Issue with Print Page break - Print preview in browsers

I am facing an issue with Page break, where my div starts at the page end rather than being at the next page after applying the page-break.

I have referred this question How to deal with page breaks when printing a large HTML table and made some adjustments to my CSS properties

.items-list {
    page-break-inside:avoid;
    page-break-after:auto;
}

Basic structure of HTML file

<div class="row items-list" *ngFor="let country of countryWiseData">
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
</div>

My issue is with the Continuation of Div's section, I need the broken div to be part of next page.

enter image description here

Upvotes: 0

Views: 550

Answers (1)

Am Novice
Am Novice

Reputation: 325

This might not be an issue which people might face frequently, but posting my root casue so that it might help someone.

The issue was due to css property that was being loaded from element that is hidden away from print, in my case it was

flex-direction : column

Upvotes: 2

Related Questions