Wkhtmltopdf: flex layout not working

Created on 31 Jan 2015 · 4Comments · Source: wkhtmltopdf/wkhtmltopdf

jrm2k6 @ 12:40:19 : ~  $wkhtmltopdf --version
wkhtmltopdf 0.12.2.1 (with patched qt)

test.html:

<html>
<head>
<style>
.item {
    flex: 0 0 40%;
    margin: 5px 5px;
    height: 100px;
    border-radius: 6px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

#container {
    display: flex;
    direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

</style>
</head>
<body>
<div id="container">
    <div class="item"><p class="content">Formulated for</p></div>
<div class="item"><p class="content">Formulated for</p></div><div class="item"><p class="content">Formulated for</p></div><div class="item"><p class="content">Formulated for</p></div><div class="item"><p class="content">Formulated for</p></div><div class="item"><p class="content">Formulated for</p></div><div class="item"><p class="content">Formulated for</p></div>
</div>

</body>
</html>

jsfiddle: http://jsfiddle.net/4ezbbjvo/1/

The generated pdf doesn't seem to layout the div correctly.

MayWorkWith0.13

Source

jrm2k6

Most helpful comment

It works

<div style="display: -webkit-flex; display: flex;">
    <div style="-webkit-flex: 1; flex: 1;">
        1
    </div>
    <div style="-webkit-flex: 1; flex: 1;">
        2
    </div>
</div>

bgbruno on 10 Sep 2015

👍3 ❤1

All 4 comments

Anybody?

jrm2k6 on 6 Feb 2015

Came across the same issue, but noticing that most display issues with wkhtmltopldf aren't addressed since they're 'in the underlying webkit library' (see the long-standing kerning issues).

adamgriffis on 27 Feb 2015

Try if it is better with 0.13 alpha, otherwise it is unlikely to be fixed.

ashkulz on 17 Mar 2015

It works

<div style="display: -webkit-flex; display: flex;">
    <div style="-webkit-flex: 1; flex: 1;">
        1
    </div>
    <div style="-webkit-flex: 1; flex: 1;">
        2
    </div>
</div>

bgbruno on 10 Sep 2015

👍3 ❤1

Was this page helpful?

0 / 5 - 0 ratings