Odoo qweb invoice report pdf template table height and invoice line vertical alignment

Question

I am creating a custom invoice template in Odoo and I need the invoice line table to take up most of the screen even if it has only a few invoice lines. Here's the code for the table:

                    <table class="cr-table" style="height:200px;margin-top:0px">
                    <thead class="cr-th">
                        <tr>
                            <th>Your Item #</th>
                            <th>Product Description</th>
                            <th class="text-right">U of M</th>
                            <th class="text-right">Qty Ordered</th>
                            <th class="text-right">Qty Shipped</th>
                            <th class="text-right">Unit Price</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody class="cr-tbody" style="height:100%">
                    <tr>
                        <td colspan="7">
                            <span t-field="o.pre_text"/>
                        </td>
                    </tr>
                    <tr t-foreach="o.invoice_line" t-as="l">
                        <td><span t-field="l.product_id.default_code"/></td>
                        <td><span t-field="l.name"/></td>
                        <td class="text-right"><span t-field="l.uos_id"/></td>
                        <td class="text-right"><span t-field="l.quantity_ordered"/></td>
                        <td class="text-right"><span t-field="l.quantity"/></td>
                        <td class="text-right">
                            <span t-field="l.price_unit"/>
                                <!-- t-field-options='{“digits”:5}'/> -->
                        </td>
                        <td class="text-right" groups="sale.group_discount_per_so_line"><span t-field="l.discount"/></td>
                        <td class="text-right">
                            <span t-field="l.price_subtotal"/>
                                <!-- t-field-options='{"widget": "monetary"}'/>  -->
                                <!-- "display_currency": "o.currency_id" -->
                        </td>
                    </tr>
                    <tr>
                        <td colspan="7">
                            <span t-field="o.post_text"/>
                        </td>
                    </tr>
                    </tbody>
                </table>

Setting height in % does nothing, min-height does nothing, height in pixels works, however I need the invoice lines to align to the top, because in the current state they just spread evenly across the whole table, I need them to have the same spacing between them no matter how many invoice lines there are. Also, from what I've tried it seems qweb does not support css3, is this true?

I have, there are style attributes there for experimenting and trying to find a solution. Note the cr-table and cr-th classes, those are in my css. {display: flex; align-items: flex-start; } would work maybe, but they don't seem to be supported in Odoo. — Paulius Stundžia

spacebiker spacebiker · Accepted Answer · 2020-01-20T22:27:18

0

votes

Add the following to your css:

table.cr-table tbody tr:last-child
{
    height:100%;
}

Odoo qweb invoice report pdf template table height and invoice line vertical alignment

1 Answers