'ReactJS - How to print all the content of a Scrollable elment with react-to-print

I have a <div> tag that has a list of elements, the list can be long so I gave a fixed height to the <div> tag and overflow:auto property to have a scrollable list in case of overflow.

Now I have a button at the bottom of this <div> to print the content of <div>. I am using react-to-print library as it seemed the easiest way to print the contents of my <div> along with the CSS.

The problem is that the print preview is showing only the elements present in the viewport, but I want all the elements in the <div> to print.

I can not use the overflow: visible property on my <div> as I definitely need the <div> to be a scrollable element also I can not place the button to print the list inside my <div> as users cant keep scrolling to the end of list to print it.

Here is a sandbox to play around: https://codesandbox.io/s/material-demo-forked-wifyd?file=/demo.js:337-341

link to react-to-print: https://www.npmjs.com/package/react-to-print

Any help is highly appreciated!!

javascriptcssreactjsreact-to-print


Solution 1:[1]

Try adding @print media queries to your div and increase the height of the div while printing alone?

I noticed it was not printing the viewport, rather it was printing only the top list of the div.

i.e The part of div that is visible only comes while printing.

Something like

@media print {
  div{
    height: 100%;
  }
}

Solution 2:[2]

Add css rule with "!important" will solve the problem.

@media print {
  #scrollableDiv {
    width: 100%;
    height: 100% !important;
    overflow: visible;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pisomanik
Solution 2 Orhan

Related Questions