Odoo QWeb - Flexbox not working when create pdf report

Question

When this below code is used in HTML and opened using a browser, the flexbox effects are what I want. But when I use the same code in QWeb, the output is different (the flex div is not divided into two sections).

<div style="display: flex;">
    <div style="border: 1px solid #ccc; flex: 1;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
    <div style="border: 1px solid #ccc; flex: 1;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
</div>

Browser

PDF Report

But I want to use flexbox instead because I don't just want to split the page into 2 sections. — NM Naufaldo, Jun 25 '21 at 08:11

score 1 · Answer 1 · answered Jun 25 '21 at 09:09

The problem is not qweb but wkhtmltopdf. You can try webkit-box as mentioned in Using Flex/CSS with wkhtmltopdf

<div style="display: flex; display: -webkit-box; -webkit-box-pack: center; justify-content: center;">
    <div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
    <div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; margin-right: 0;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
</div>

Odoo QWeb - Flexbox not working when create pdf report

1 Answers1