CODEWITHSUNDEEP
flexboxodooqweb
NM Naufaldo
NM Naufaldo

Reputation: 1160

Odoo QWeb - Flexbox not working when create pdf report

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

enter image description here

PDF Report

enter image description here

Upvotes: 1

Views: 2100

Answers (1)

Kerrim
Kerrim

Reputation: 533

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>

Upvotes: 1

Related Questions