Using Flex/CSS with wkhtmltopdf

Question

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.

score 62 · Accepted Answer · answered Jan 06 '20 at 10:23

62

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.

answered Jan 06 '20 at 10:23

Rajian

744
6
5

2

Good call! `webkit-box` was the missing component that I couldn't figure out. – bsplosion Apr 07 '20 at 18:16
This is worked for me too! – Agus Sapurta Sijabat Nov 15 '21 at 07:03
While this is a solution, it isn't by far the solution. webkit-box is not even close to flex. Hope wkhtmltopdf accepts flex soon, but I really doubt about that since flex been out since 2013 :( – Miguel Peniche Dec 13 '21 at 23:40
@Bengala - wkhtmltopdf uses the original QtWebKit, which is abandoned. The developers have asked for help moving to something newer, but there have not been enough/any volunteers. See wkhtmltopdf.org/status.html for the full story. – Ben Scott Oct 05 '22 at 16:18

score 10 · Answer 2 · answered Dec 14 '21 at 11:25

10

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

answered Dec 14 '21 at 11:25

raphael-allard

205
2
9

score 4 · Answer 3 · edited May 22 '20 at 10:16

4

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

edited May 22 '20 at 10:16

double-beep

5,031
17
33
41

answered May 22 '20 at 09:55

saschanos

101
1
4

Nimesh Vaghasiya · Answer 4 · 2022-03-01T04:21:36.887

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.

Thank you SO much, I've been going crazy over this! – Marko D May 30 '22 at 11:15 — Marko D, May 30 '22 at 11:15

score 2 · Answer 5 · answered Jan 02 '20 at 09:09

2

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.

answered Jan 02 '20 at 09:09

bellangelo

31
1
4

score 2 · Answer 6 · edited Aug 02 '21 at 15:27

2

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;

edited Aug 02 '21 at 15:27

Dharman

30,962
25
85
135

answered Aug 02 '21 at 15:22

Rohit Singh

21
1

score 0 · Answer 7 · answered Nov 18 '22 at 12:34

0

This worked for me:

.row {
  white-space: nowrap;
  > div {
    display: inline-block;
    white-space: normal;
  }
}

answered Nov 18 '22 at 12:34

Flyke

347
3
5

score 0 · Answer 8 · answered Apr 04 '23 at 06:54

0

you can render only two image for multiple rows

       .img-item {
            border: 1px solid #4a4a4a;
            display: inline-block;
            width:48%;
            margin: 5px;
        }

answered Apr 04 '23 at 06:54

user21562614

1

Using Flex/CSS with wkhtmltopdf

8 Answers8

Linked