Laravel-snappy: thead and tbody contents overlap from second page onwards

Created on 9 Apr 2016  路  16Comments  路  Source: barryvdh/laravel-snappy

I have got thead which is supposed to be repeated to each page. It is working correctly in first page, but from second page onwards contents from tbody is overlaping thead.
I used wkhtmltopdf options --margin-top, --header-spacing, but those options only push the content (thead & tbody) downwards creating black space on top of the page.

Anybody have solution to this problem. Any help would be appreciated.
Thanks in advance.

stale

Most helpful comment

found the solution: this worked for me
thead{display: table-header-group;}
tfoot {display: table-row-group;}
tr {page-break-inside: avoid;}

All 16 comments

found the solution: this worked for me
thead{display: table-header-group;}
tfoot {display: table-row-group;}
tr {page-break-inside: avoid;}

Thanks!

Adding this CSS worked for me:

<style>
        thead {
            display: table-header-group;
        }
        tfoot {
            display: table-row-group;
        }
        tr {
            page-break-inside: avoid;
        }
</style>

I keep trying that solution and it doesn't work for me. I'm on Ubuntu

Encountered weird situation few days earlier. If you have underscore in your domain or subdomain, the footer don't render properly. Replaced underscore with dash and the footer was rendering properly. Be weary of that.

@InstanceOfMichael : Thanks. Your solution worked for me.

I put my table info a DIV which has a class export-table and added the following CSS and it resolved the issue.

@media print {
    .export-table {
        overflow: visible !important;
    }
}

Version 0.12.2.2 did not repeat the table headers. 0.12.4 does.

Thanks!

Adding this worked for me:

table thead {
    display: table-row-group;
  }

I would like to add to this, if you're using bootstrap tables. Having a wrapper around your table using the class "table-responsive" breaks the whole page-break-inside: avoid;

I have the same problem and it doesn't work i tried everything .
anyone can help ??
Thanks

  <template id="new_facture">
      <t t-call="report.html_container">
          <t t-call="facture_layout.facture_layout">
          <div class="page">
            <!-- Report page content -->
            <style>
                           tbody {font-size: 10px;}
                   .police {font-size: 10px;}
                 thead{display: table-header-group;}
                 tfoot {display: table-row-group;}
                 tr {page-break-inside: avoid;}
            </style>

            <t t-foreach="docs" t-as="o">

                  <table class="table table-condensed table-bordered table-responsive">
                            <thead>
                                    <tr style="background-color:#A9E2F3;">
                                        <th>Description</th>
                                        <th class="hidden">Source Document</th>
                                        <th class="text-right">P.U</th>
                                        <th class="text-right">PPA</th>
                                        <th class="text-right">PPH</th>
                                        <th class="text-right">Qt茅</th>
                                        <th class="text-center">UM</th>
                                        <th class="text-center">Mnt Brut</th>
                                        <th class="text-right">RM(%)</th>
                                        <th class="text-right">Montant HT</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr t-foreach="o.invoice_line_ids" t-as="l">
                                        <tr>
                                            <td>

                                            <span t-field="l.name"/>

                                                <t t-if="(l.lot_formatted_note is not False)">
                                                <div style="margin-left:25px;" t-field="l.lot_formatted_note" />
                                                </t>




                                        </td>

                                        <td class="hidden"><span t-field="l.origin"/></td>
                                        <td class="text-right">
                                            <span t-field="l.price_unit"/>
                                        </td>
                                        <td class="text-right">
                                            <span t-field="l.ppa"/>
                                        </td>

                                        <td class="text-right">
                                            <span t-field="l.prix_pharmacien"/>
                                        </td>

                                        <td class="text-right">
                                            <span t-esc="'%.0f'%(l.quantity)"/>
                                        </td>

                                        <td class="text-center">
                                            <span t-field="l.uom_id" groups="product.group_uom"/>
                                        </td>

                                        <td class="text-right">
                                            <span t-field="l.price_subtotal_brut"/>
                                        </td>

                                        <td class="text-right">
                                            <span t-field="l.discount"/>
                                        </td>

                                        <td class="text-right">
                                            <span t-field="l.price_subtotal" t-options="{&quot;widget&quot;: &quot;monetary&quot;, &quot;display_currency&quot;: o.currency_id}"/>
                                        </td>

                                        </tr>
                                    </tr>
                                 </tbody>
                            </table>
              </t>
            </div>
</t>
</t>
</template>

am using odoo 10 Ubuntu 16 & 18 wkhtmltopdf 1.2.1 & 1.2.4

Adding this worked for me:

table thead {
    display: table-row-group;
  }

This worked for me as well

@mohamed199320 try thead{display: table-row-group;}

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
Any issues with PDF rendering itself that are not directly related to this package, should be reported on https://github.com/KnpLabs/snappy instead. When having doubts, please try to reproduce the issue with just snappy.
If you believe this is an actual issue with the latest version of laravel-snappy, please reply to this issue so we can investigate further.
Thank you for your contribution! Apologies for any delayed response on our side.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MaximeDawn picture MaximeDawn  路  3Comments

jerearaujo03 picture jerearaujo03  路  5Comments

krtorio picture krtorio  路  5Comments

samsoft00 picture samsoft00  路  3Comments

austenc picture austenc  路  7Comments