Odoo QWeb - Flexbox не работает при создании отчета в формате PDF

Когда приведенный ниже код используется в HTML и открывается с помощью браузера, мне нужны эффекты flexbox. Но когда я использую тот же код в QWeb, вывод отличается (гибкий div не делится на две секции).

<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>

Браузер

введите здесь описание изображения

PDF-отчет

введите здесь описание изображения


flexbox odoo qweb
person NM Naufaldo    schedule 25.06.2021    source источник
comment
В qweb используйте div class = 'float-left col-6' и float-right   -  person Neural    schedule 25.06.2021
comment
Но вместо этого я хочу использовать flexbox, потому что я не просто хочу разделить страницу на 2 раздела.   -  person NM Naufaldo    schedule 25.06.2021
comment
По моему опыту, display:flex не работает в qweb.   -  person Neural    schedule 25.06.2021

Ответы (1)


arrow_upward
0
arrow_downward

Проблема не в qweb, а в wkhtmltopdf. Вы можете попробовать webkit-box, как указано в Использование Flex/CSS с 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>
person Kerrim    schedule 25.06.2021