Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive design printed #47

Closed
AJTJ opened this issue Sep 13, 2018 · 4 comments
Closed

Responsive design printed #47

AJTJ opened this issue Sep 13, 2018 · 4 comments
Labels

Comments

@AJTJ
Copy link

AJTJ commented Sep 13, 2018

Hi, I'm building a project using reactstrap/bootstrap and I have my inner components set to be full-width at certain browser widths <Col xs={12} sm={12} md={6} lg={6}>...

Unfortunately, react-to-print is choosing to print the components at full-width, which I do not want, since they fit nicely at half-width.

How do you compensate for responsive components? Can I request it print as if the browser were at max-width?

@Ryan-Hancock
Copy link

I am currently having to create my own flex boxed components as the same issue is occurring for me.

@Richi2293
Copy link

Richi2293 commented Nov 16, 2018

Yes it doesn't work well also for me with bootstrap components.


I solved by transforming the components, example:

<Col md="4"> ---> <div className="col" md="4">

@MatthewHerbst
Copy link
Owner

Have you looked into the CSS @page property? You might be able to solve your issues with that

@MatthewHerbst
Copy link
Owner

@AJTJ were you able to solve your issue here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants