Printing uses mobile viewport instead of desktop

[govardhan5]

Hi ,

In my application I applied styling for the content based on the view port. For example for the desktop I am using col-lg-3 , for ipad i am using col-md-3 and for mobile- col-sm-6 and col-xs-6. But on the print preview it is taking only mobile version styling sm and xs even on when the user is clicking on print from desktop. Is there any fix for this issue where it supports lg and md as well?

[MatthewHerbst]

Hello.

Any chance you could make a working codesandbox to show the problem please?

[dantecarlo]

Hello, I am having the same issue.
The doubt is how to force printing as a desktop view (resolution > 1024px)

[MatthewHerbst]

Hi @dantecarlo would it be possible for you to share any of the code you are using, or to at least make a replica of the problem with fake data? It's very difficult to help with only blurred photos

[dantecarlo]

Working on an example, but you can see the explained behavior in this issue in stack overflow
when TD Perez wants to print, he is getting the mobile view

[MatthewHerbst]

Thanks! Yeah, I understand the problem, but it's almost certainly with the layout library you are using, and not react-to-print, since we don't change the styling at all, and we also don't set any viewports. Once you have an example I would be happy to help figure it out though, I know a few people have run into this or similar issues

[dantecarlo]

Example finished here, I hope this helps to understand the current behavior

[dantecarlo]

@MatthewHerbst if you are working in this issue, could you please mark it as open again

[MatthewHerbst]

I believe I have a solution for this: #553

Not sure why I never found this earlier. Thanks for bringing attention back to it.

My one concern about merging it is that it could change existing behavior for people without them knowing, but I think I'm willing to try it as a patch change instead of a major and we'll see and go from there.

[MatthewHerbst]

@dantecarlo the fix is published in version v2.14.9, and I have confirmed that if you upgrade the version in your example it fixes the problem. Please let me know if you run into any other issues!

[dantecarlo]

@MatthewHerbst thank you for your quick response and your openness to solving this error.
Many successes and thanks for this excellent work

[dantecarlo]

@MatthewHerbst one last question: how can I force even if I am on a mobile resolution to print with desktop resolution?

[MatthewHerbst]

@MatthewHerbst one last question: how can I force even if I am on a mobile resolution to print with desktop resolution?

Hmm. If you open the "Desktop site" (what the option is called on Android Chrome at least) does it still print as if it was mobile? My guess is it still does. To support a custom viewport size we'd probably have to add a new prop that, if set, would override the size taken from the parent window

[dantecarlo]

@MatthewHerbst one last question: how can I force even if I am on a mobile resolution to print with desktop resolution?

Hmm. If you open the "Desktop site" (what the option is called on Android Chrome at least) does it still print as if it was mobile? My guess is it still does. To support a custom viewport size we'd probably have to add a new prop that, if set, would override the size taken from the parent window

What I'm trying to achieve is to print my content in 1024px resolution, whatever the current device resolution is. If you could give that prop (an iframe width) would be excellent