Page Styles not Printing at all

[heduardo1989]

Hi, I'm using React.Bootstrap for styling my custom component.
Then, when printing such component from clicking a button, I'm getting the page to print without most of styles applied(Ex. rows, columns...).

Pleasee help me with this, I really need to make this work and I have already tried multiple approaches (without success) until I found this library.

Below a quick summary of my implementation:

import PrintAgreementForm from "./PrintAgreementForm";

<ReactToPrint
  trigger={() => (
    <Button variant="primary" className="mr-2" onClick={this.handlePrint}>
      Print
    </Button>
  )}
  content={() => this.componentRef}
/>
<div style={{ display: "none" }}>
  <CustomComponent ref={(el) => (this.componentRef = el)} />
</div>

[MatthewHerbst]

Hello. Any chance you could provide a working codesandbox or similar that shows the problem? It's very hard to debug given the limited amount of code you have shared above

[heduardo1989]

Ok sure, please try to access this sandbox: https://hlvcn.csb.app/
this is just a small example of the issue.

[MatthewHerbst]

In the sandbox if I remove the style={{ display: "none" }} what I see before print is the same thing I see during print. This means you aren't importing the Bootstrap styles correctly. If you read the react-bootstrap Getting Started docs you'll notice under the CSS section that you are missing a style import in your code. Importing the styles in the sandbox properly applies the Bootstrap styles. Happy to help you debug more here, but as there is no issue with react-to-print I am going to close this issue (comments can still be made)

[heduardo1989]

Thanks for your feedback but I think it seems like I could reproduce the issue successfully so, below I provide more details:
In sandbox, I can't add the style import you recommended due to the following issue:

Anyway, I'm following all these instructions in my code as you can see below:

The page I'm trying to print looks like this when rendering: (I'm using orange boxes to hide sensible info)

Then, this is the result when printing it:

[heduardo1989]

This is an updated sandbox that reproduces the issue: https://nu3iy.csb.app
Please note I've modified the sizes pf each of the elements on my component and still the results are the same.

Please let me know what can I be missing.
Thanks again

[MatthewHerbst]

Thanks for the update. I'm looking at it now

[heduardo1989]

Hi @MatthewHerbst, any chances you can provide some workaround to implement these printing features while this issue is resolved? Thanks in advance

[MatthewHerbst]

@heduardo1989 I'm still not sure what the issue is honestly. I see the styles on the page, and I can't figure out any reason why react-to-print wouldn't copy them over. I'll try and do some more in-depth analysis tonight

[heduardo1989]

Thanks a lot for that. I really appreciate it!!

[MatthewHerbst]

@heduardo1989 apologies for taking so long on this. I've come back to it, and realized that the styles are printing correctly. It's the page width that is changing. If you make the browser smaller you will see that the page actually becomes exactly what it shown in the print window. I was able to correct the issue by adding xs breakpoints into your columns, in addition to the sm breakpoints.

According to the docs the xs breakpoint is for "extra small devices (<576px)". So, the question becomes why the print window for your page is becoming so small.

I should note that in the CustomComponent.jsx file you import styles.css but that file only has styles for .App and seems to be missing many styles that are otherwise referred to, such as styles.topHeaderRow.

Let me know how else I can help, or if you've already come up with a solution.