CODEWITHSUNDEEP
reactjsprintingreact-bootstrapresponsiveness
Canovice
Canovice

Reputation: 10481

When printing website (react component), how to set width for react-bootstrap breakpoints for layout?

We have a react application and would like users to be able to easily and cleanly print the various pages on the website. Our application uses react-bootstrap grid to handle responsiveness. Here is a snippet of one of our pages, which includes two tables. These tables are side-by-side in the top image (based on both the xl and lg breakpoints, which use two columns with size 6), and stacked in the bottom image (based on the md breakpoint, with size = 12).

First Image enter image description here

Second Image enter image description here

When I hit CMD + P to launch the print window, I receive the following for this part of the page with the 2 tables:

enter image description here

The print window always shows the two tables stacked, regardless of the current width of my browser. However, for printing, I would prefer for the two tables to be side-by-side, not stacked.

Is it possible to control / change the "width" of the page as perceived by the printer? I assume that currently the print functionality is simply treating the page as some width that falls into the md breakpoint, however it would be great for the page to use the lg or (preferred) xl breakpoints.

Upvotes: 1

Views: 1059

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

Let's say you have something like this as your markup:

<div class="row row-of-tables">
    <div class="col col-12 col-md-12 col-lg-6 col-xl-6">Table 1</div>
    <div class="col col-12 col-md-12 col-lg-6 col-xl-6">Table 2</div>
</div>

When printing, the below code will make the cols take up max-width of 50% just like what col-lg-6 or col-xl-6 does

@media print {
    .row.row-of-tables > .col {
        max-width: 50%;
    }
}

Upvotes: 1

Related Questions