Modal content gets cut off after first page in print preview

Question

I am running into an issue when printing module content, and this happens to all browsers. When I print the modal content, it only previews the first page and anything after the first page would get cut off. I have tried debugging in Chrome print emulator but still cannot figure out a solution.

At some point, I added a scrollbar to the print emulator and I can scroll down to see all the content, but when I print preview, it shows the scrollbar and still cuts off any content after the first page. I don't know why print preview behaves so differently from the emulator.

The project is in react, plain modal that doesn't use any third-party library like bootstrap modal.

Media query for print:

@media print {
  body, html {
    height: 100%;
    overflow: visible !important;
  }

  .account-header {
    display: none;
  }

  .list-wrap {
    height: 100%;
    // overflow: scroll !important;
  }
  .account-content {
    margin: 0;
    padding: 0;
    border: 2px solid red;
    position: absolute !important;
    overflow: visible !important;
    visibility: visible !important;
    display:block;
  }

  .account {
    background-color: none !important;
    display: inline-block;
    font-size: 12px;
    border: 1px solid blue;
  }
}

Note: .list-wrap is a class applying to the parent container for .account-content. Using the overflow: scroll style would add a scrollbar to the print emulator and I would be able to see all the modal content there. But in the actual print preview, it still shows the first page only.

Answer 1

The problem, when printing, is that you have to set the page size property. The rules that give you the issues you are describing are the ones related to height.

Depending on how you would like to print pages and how you want to handle page breaks, you have to act as described in the following documentation:

https://www.w3.org/TR/WD-css2/page.html

The sections you should check are, at least:

• https://www.w3.org/TR/WD-css2/page.html#page-size-prop
• https://www.w3.org/TR/WD-css2/page.html#page-breaks

Another article that can help you is this one:

https://www.jegsworks.com/lessons/web-2/html/step-mediaprint.htm

If you want be make sure to have a more wide as possible compatibility with browsers, this GitHub repository may help you:

https://github.com/cognitom/paper-css