CODEWITHSUNDEEP
cssprinting
psx
psx

Reputation: 4048

DIV not paginating on print

I have a page that contains a DIV. This div is a container for other elements and can increase in height greater than the height of a page when printed.

I assumed it would paginate without any issue. The problem I am seeing is the DIV increases in height to the full height of page 1, then that's it. No more is displayed outside page 1 of the printed output.

After a bit of experimenting, I discovered display: inline appears to fix the problem. I do not understand why.

If this is indeed the solution to the problem, can someone please explain why this fixes my problem.

I want to understand the reason why this works.

Upvotes: 0

Views: 352

Answers (1)

webketje
webketje

Reputation: 10986

@your comment: you ask the right questions at the right time as I'm currently working on exactly the same! :) I'll share some screenshots to show the results; I think printing a really really large table requires a pretty complex solution, but for my table it works (I'd call it "medium").

In my application there's a table in a container div, with block elements with display set to table-cell (the columns width wasn't consistent when using floats and margins).

1.The page in normal webview

The page in normal webview

2.The page after putting a print media query in the stylesheet, in print: (don't mind the dark div, it's a mask i haven't removed yet) As you can see the table goes over multiple pages and is horizontally scaled to fit.

@media print {
#data {overflow: visible; height: auto;} /* the container div */
.bld {display: block} /* the blocks you see in the table, web display: table-cell */
/* I tested all table{ display: inline, inline-table, and table } and they 
all worked for me, as displayed in the screenshot below */
}

The page in print

3.To set pagebreaks for printing to a certain div (maybe row), I'll refer you to this post, because I haven't tried it myself yet, but might be worth the reading: Make divs on a page print on seperate pages when printed

Another hack would be to position a div somewhere inside the first column of row x, then set this divs CSS page-break-after: always; to force page breaks on those rows. I tested some pagebreak stuff on tr's, td's and the table, but it didn't work (because tr's have a styling somewhat different from other HTML elements)

4.As reference on the differences between the different display values for tables: https://stackoverflow.com/questions/15130285/css-differences-between-style-display-inline-inline-table-and-table

I'm going to read up on this as well, if you find something else that is interesting relating this topic, post me an @ in the comments, thanks!

Upvotes: 1

Related Questions