Using Flex/CSS with wkhtmltopdf - PeakU

0

2.1K

Views

Using Flex/CSS with wkhtmltopdf

I've successfully created a list using the following answer with flexbox on my HTML page How to display 3 items per row in flexbox?

I have a need to create a PDF with this data and I'm using wkhtmltopdf (https://wkhtmltopdf.org/) which also works fine however the PDF generated has all my List Items in 1 long column instead of 3 per row.

Looks like the CSS is not being processed when the PDF generation is happening any insight is appreciated.

over 4 years ago · Santiago Trujillo

6 answers

Answer question

0

Try to decrease the width of the flex columns. For example when I tried to make 50/50 columns I had to put a width of 49.8% instead of 50%. Hope it helps.

over 4 years ago · Santiago Trujillo Report

0

This worked for me :

.row {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    -webkit-box-pack: center; /* wkhtmltopdf uses this one */
    justify-content: center;
}

.row > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.row > div:last-child {
    margin-right: 0;
}

See https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 for more informations.

over 4 years ago · Santiago Trujillo Report

0

I used autoprefixer in my application to automatically add prefixes. You just need to update browsersList with ie >= 9.

over 4 years ago · Santiago Trujillo Report

0

To use flex or boxes while converting to pdf, You need webkit Example:-

display: flex;
display: -webkit-flex;

for justify-content and align items you have to use

-webkit-align-self: flex-end;
 align-self: flex-end;
webkit-justify-content: space-between;
justify-content: space-between;

over 4 years ago · Santiago Trujillo Report

0

I resolved this issue using:

equivalent of display:flex; ==> display: -webkit-box;

equivalent of justify-content: space-between; ==> -webkit-box-pack: justify;

Some useful informations coming from: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522

over 4 years ago · Santiago Trujillo Report

0

As fix for Bootstrap 5, working with wkhtmltopdf 0.12.*, I found and completed the following style

            <style>
                /* Fix wkhtmltopdf compatibility with BS flex features */

                .row {
                    display: -webkit-box;
                    display: flex;
                    -webkit-box-pack: center;
                    justify-content: center;
                }

                .row>div {
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                }

                .row>div:last-child {
                    margin-right: 0;
                }


                /* Fix wkhtmltopdf compatibility with BS tables borders */


                /* Requires cellspacing="0" on table to prevent spacing */

                table {
                    border-collapse: separate !important;
                }

                th,
                td {
                    border-top: none;
                    border-left: none;
                    border-right: none;
                }

            </style>

source saved my day while upgrading from bs 4 to bs 5.

over 4 years ago · Santiago Trujillo Report

Answer question

Find remote jobs