You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+54Lines changed: 54 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -463,6 +463,60 @@ If your content rendered as print media does not automatically break multi-page
463
463
- A style of `position: absolute`, when rendered to print, may result in reformatted, rotated, or re-scaled content, causing unintended affects to print page layout and page breaks
464
464
- Using `flex` may interfere with page breaks, try using `display: block`
If you need to print the content of a scrolling container, you may encounter the following issues:
471
+
472
+
-[Unable to control the scroll position](https://github.com/gregnb/react-to-print/issues/603#issue-1647664811), so the printed content may not be what you want.
473
+
-[Overflow content is truncated](https://github.com/gregnb/react-to-print/issues/603#issuecomment-1649604330), resulting in missing printed content.
474
+
475
+
To solve these problems, you need to modify the properties of the scrolling container when printing. You can pass a function to the `print` property, which will be called when printing. In this function, you can use the DOM API to query the scrolling container that needs to be modified, and then modify its properties to **control the scroll position**.
In addition to the methods in the above example, you can also simply add a CSS class name to the scrolling container when printing to **show all content**.
503
+
504
+
Set the container to `overflow: visible; height: fit-content` when printing, cancel the scrolling behavior when the content overflows, and make the height adapt to the content.
505
+
506
+
```css
507
+
@media print {
508
+
.scroll-container {
509
+
overflow: visible;
510
+
height: fit-content;
511
+
}
512
+
}
513
+
```
514
+
515
+
> Note:
516
+
>
517
+
> - If the styles do not take effect, you can try using the `!important` modifier.
518
+
> - The styles provided in the above instructions are for reference only. Complex situations may require more styles to achieve the desired result.
519
+
466
520
## Running locally
467
521
468
522
*NOTE*: Node >=12 is required to build the library locally. We use Node ^14 for our tests.
0 commit comments