14
Views
1
Comments
Solved
[Reactive Html2Pdf Js] Page break is cutting text
reactive-html2pdf-js
Reactive icon
Forge component by Ryan Surjadi
Application Type
Reactive

Hey there,


I'm building a web block to print to PDF with this component.
I'm having trouble with page breaks because I have a big table with many rows to print. 
If I use "avoid-all" (the default setting), the first page cuts the entire table to the second page, if I use the css setting it cuts the text mid row (you can see it in my attachment).

What is the best practice in order to show tables with many rows?

regards


page.png
Solution

I was able to correct this with this css:


table { 
    page-break-inside: auto;
    page-break-before: avoid;
}

tr { 
    page-break-inside: avoid; 
    page-break-after: auto; 
}


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.