[BUG] [TEMPORARY FIX] - Print container on Chrome + MUI is hiding `Header and Footers` option as default behavior about react-to-print HOT 5 OPEN

Hello, thanks for writing this up.

https://codesandbox.io/p/devbox/print-container-not-showing-headers-footers-checkbox-8cj65z?file=%2Fsrc%2Fcomponents%2FPrintContainer.tsx%3A16%2C13

I'm unable to access this link, is it correct/do you need to make it public?

This is really interesting though. I was able to replicate the issue locally using the examples. Commenting out these lines resolved the issue. However, while having those lines commented out I toggled the show headers/footers once, and now, even with those lines running, I cannot replicate the issue. Very strange.

This seems more like an upstream bug in Chrome than a bug with MUI or anything else. Safari does not appear to have this issue. Firefox also seems to not have this issue, and instead forces headers and footers on even with the lines above (which also feels like an upstream bug in Firefox).

Will investigate this more, thank you. My guess is that we have limited ability to fix this in a generic way though 😢

from react-to-print.

@MatthewHerbst lol I forgot to make it public. Now, it's edited with new link, everyone can fork and follow those steps.

from react-to-print.

@sensasi-delight thanks for the report. Based on your fix, it's possible MUI added some code that also uses @media print so you need your specifier to be more specific to override theirs. Just a guess though, I haven't looked at their code

from react-to-print.

@MatthewHerbst Maybe, after you enabling and commenting again, continue to appear the option because the rule was set on this chrome tab, so you need to force refresh the page(F5/cmd+R) to reproduce again.

On my attempt to reproduce on sandbox by the first time, nextjs v14 with App Router was installed instead of v13 with pages router. So I just simulated there, on v14, without MUI theme provider and etc.

It showed options and header as normal, thats why I think about MUI could be part of the problem.

from react-to-print.

I recently encountered a similar issue where the page margins suddenly disappeared when printing, even though I hadn't changed my code for the past four weeks. Strangely, this printing issue just appeared today. I tried to find which PR from MUI caused this, but there were too many to sift through, making it difficult to pinpoint the exact one. I just wanted to share a solution that I implemented, which is different from what the author suggested. I used the pageStyle property in the ReactToPrint component:

<ReactToPrint
  {...props}
  - pageStyle="@page { margin: auto; }" // this line is working fine for the past four weeks
  + pageStyle="@media print { margin: auto; }"
 />

I hope this helps someone experiencing the same problem.

from react-to-print.