Styles missing in print dialog

[lohiaumang]

Hi,

I have a component that looks like this -

But when I print this, I get this in the print dialog -

I am using bootstrap grid with react (which uses flexbox). I am using the library like this -

const deliveryOrderTableRef =
    useRef() as React.MutableRefObject<HTMLDivElement>;
const printPage = useReactToPrint({
    content: () => deliveryOrderTableRef.current,
    copyStyles: true,
});

<div className="delivery-order-table" ref={ref}>

[MatthewHerbst]

Hello. Could you please make a working codesandbox or similar so I can see the issue and try to debug? I've seen similar issues before and normally what's happening is that bootstrap is thinking the printer is a small viewport and so sizes everything down to sm which often throws off styles from what people expect

[lohiaumang]

Hi Matthew, I created a project that shows my problem here - https://stackblitz.com/edit/react-f7gtpf?file=src/App.js. Press the Open in New Window button to see it on a full browser screen. Let me know if you have any problems viewing it. Thanks for the prompt reply.

[lohiaumang]

Hi @MatthewHerbst, any insights into how I can solve this problem will be very helpful. Thank you

[MatthewHerbst]

@lohiaumang apologies for not getting back to you. Were you able to solve this?

[lohiaumang]

Hi @MatthewHerbst, figured I should make sure that the right styles are being applied at the xs screen size. I had the layout designed for the sm screen size and above. Just changing sm to xs solved the issue. Your reply from earlier was quite helpful, thanks 😄

Hello. Could you please make a working codesandbox or similar so I can see the issue and try to debug? I've seen similar issues before and normally what's happening is that bootstrap is thinking the printer is a small viewport and so sizes everything down to sm which often throws off styles from what people expect