Read more

How to fix HTML elements being cut off when printing

Arne Hartherz
November 08, 2017Software engineer at makandra GmbH

When you print (or print preview) and elements are cut off (e.g. after 1st page, or "randomly") you should check your CSS rules for these:

  • Is there an element with "display: inline-block" that surrounds your content? Make sure it has "display: block" for printing.
    This primarily affects Firefox and Internet Explorer. Chrome seems to be able to handle inline-block elements in most cases.

  • Does the element itself, or a container, define "overflow: hidden"? Use "overflow: auto" (or maybe "overflow: visible") instead.

  • Is the element itself, or a container, using "position: absolute" or "position: fixed". You should use "position: static" (default positioning) for printing.

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

Note that print rendering varies across browsers even more than screen rendering.

Posted by Arne Hartherz to makandra dev (2017-11-08 15:54)