React-to-print: page-break-inside does not work as expected

[ChristopherHauschild]

The page-break-inside rule does not work as expected in some components. Even defining the display as table or inline-block, some components continue to break its internal content between pages. The curious thing is that in a more extensive list, the same component has different behaviors, working correctly in some cases and breaking the internal content between pages in others, in addition to defining margins randomly (usually on the final pages).
As I found in other issues, the parent component and the child component are with 'position: relative'. Below is an example of the properties I used in the class.

.no-page-break { display: inline-block; width: 100%; page-break-inside: avoid; }

I have also defined overflow: initial, in addition to having already used the -webkit-region-break-inside: avoid. Is there a possible reason for the same component to behave differently between pages?

[MatthewHerbst]

Hello. I can't say I'm a CSS expert, but if you could post a working copy of your code (such as in a codesandbox) that would be very helpful for debugging

[ChristopherHauschild]

Hello. I can't say I'm a CSS expert, but if you could post a working copy of your code (such as in a codesandbox) that would be very helpful for debugging

Hello Matthew. Thank you for your attention. I created a sandbox with a sample code that is breaking in print. We used the Antd library in the layout, so the use of Row and Col. I have already tested inserting the code to not allow page breaks in both Row and Col. In the application we have a listing of this Item component. In the first pages the rule works accordingly, but in the last pages, the component breaks internally.

Link: https://codesandbox.io/s/empty-river-rgob2?file=/src/App.js

[ChristopherHauschild]

Hello. I can't say I'm a CSS expert, but if you could post a working copy of your code (such as in a codesandbox) that would be very helpful for debugging

Hello Matthew. Thank you for your attention. I created a sandbox with a sample code that is breaking in print. We used the Antd library in the layout, so the use of Row and Col. I have already tested inserting the code to not allow page breaks in both Row and Col. In the application we have a listing of this Item component. In the first pages the rule works accordingly, but in the last pages, the component breaks internally.

Link: https://codesandbox.io/s/empty-river-rgob2?file=/src/App.js

@MatthewHerbst

[MatthewHerbst]

Hi @ChristopherHauschild sorry for the delayed response I've been pretty heads-down at work the last few days. I'm looking at your example but I don't see a print button anywhere? I don't even see react-to-print in the dependencies of that codesandbox project?

[ChristopherHauschild]

Hi @ChristopherHauschild sorry for the delayed response I've been pretty heads-down at work the last few days. I'm looking at your example but I don't see a print button anywhere? I don't even see react-to-print in the dependencies of that codesandbox project?

Hi @MatthewHerbst ! Okay, thanks again for your attention. I apologize for the misunderstanding, I had created just one example of one of the components used in printing and which presents the problem of breakage. I updated by inserting the library react-to-print in the project. I created a file with false data to simulate component looping in the document. However, I was unable to find the correct class to insert the page-break-inside: avoid rule without the component still breaking internally. I tried to add both the id: item-container element and the className: item element, but it does not work as expected. Eventually, in the cases where it works, on the last pages, when the looping gets bigger, the component breaks.
I write in the hope that it can shed light on this behavior. I am in doubt if it can be due to the native method window.print or be related to the Antd Design library.

[ChristopherHauschild]

Here is the link: https://codesandbox.io/s/to-print-rgob2?file=/src/example/index.js

[MatthewHerbst]

The issue is your item-container style. display: flex needs to be overwritten.

If you add the following to your @media print{} query I'm able to put each item on its own page no problem:

  .item {
    page-break-after: always;
  }

  #item-container {
    display: block;
  }

[ChristopherHauschild]

The issue is your item-container style. display: flex needs to be overwritten.

If you add the following to your @media print{} query I'm able to put each item on its own page no problem:

  .item {
    page-break-after: always;
  }

  #item-container {
    display: block;
  }

Thanks again for your attention. This worked, but it is not what I need. I apologize if I have not been clear. The problem is this: in the system, the user will be able to select the information he wants to print for each profile. One option is to select a list with relationship components, just like the example I sent. If the user selects only to print this list, everything happens accordingly, page-break-inside: avoid works as expected and does not allow the component to break between pages. But, if the user selects to print more information, that list of relationships ends up being on the final pages. When this happens, page-break-inside: avoid does not work as expected, and in addition to the component breaking between pages, it receivesmargin at random.

I believe the problem is in the browser's native window.print (). It is easier to have this control when you want to print only table components or text and images, but with entire components being printed, in a customized way, I believe it becomes difficult for the browser to have control over the break between pages.
I write in the hope that you have already witnessed a situation like this and then manage to shed some light on me.

[MatthewHerbst]

So, it sounds like you just have more data than can fit on the page, and the browser has to break? Have you tried changing the format/font-size/line-size during printing to see if you can fit more information on the page? There's no way to completely stop page breaks if the information gets too long, the printer knows how long the physical piece of paper is that you will be printing to (or the PDF equivalent). You could increase the page size if needed, though you would need to know ahead of time what that should be