打印预览中的第一页后模态内容被切断

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