Html Question posted in
Some basic documentation can be found here.

Html – When printing a web page, how to make overflowing content print on multiple pages?

I’m working on an Angular project. I need to add printing support. The specific page that I need to print has, within it, a content div that is scrollable. When I print the page (using Chrome, Ctrl+P), the overflowing content (which can be scrolled through using the browser’s scrollbar) is truncated in the printed page. There ends up with only one page printed. How could I make it so that overflowing content is printed as multiple pages as needed?

Also, I cannot add page breaks to the html since the content that overflows is data-driven.

Here is how my page renders in the browser:
img_rendering_in_browser
Notice the scroll bar in the web page; it correctly scrolls down to see the navigation instructions list.

And when printing, here is how it renders:
img_printing_fail_1

I tried styling my content div with overflow: visible !important;, but it did not work. It helped a bit. In the print preview, it gets rid of the scroll bar (expected) but it does not display the content across multiple printed pages (not expected). Take a look:
img_printing_fail_2

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In the end, it was due to a component higher up in the web page's structure with the style height: 100vh;. For a normal page, this worked; the page was globally not scrollable, and my sidebar's div was made scrollable, as well as the main content div, which could be scrolled within as well.

    However, for printing, it is important that height of content is not limited or set in a hardcoded pixels value.

    TLDR: Make sure the container's height is set to height: auto; with @media print { ... }


  2. 0

    Ultimately, the browser will take the content you provide and render it to the printer top to bottom, putting in page breaks where needed.

    If you need the print view to vary from the on-screen view, you need to have a set of styles in a css @media print section so these changes are included with the print view of the page. You may also need other styles in included only in a @media screen section, so they are not part of the print view.

    Sometimes, the easiest way to get this right is to break your on-screen view in your test environment, and instead focus on getting the print layout to look correct on your screen. Then use the @media print section to hide the changes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search