Rendering issues using dompdf

[rafhun]

Background info: Woocommerce shop with the Woocommerce Invoices Plugin that generates invoice PDFs using the dompdf library. Using their filter I am trying to append the QR bill HTML. This works fine (HTML output before dompdf looks correct)
however in the generated PDF there are some layout issues.

• the invoice is wider than the page (offsetting the 2cm page margins defined by the general styles by applying negative margins does not fix this)
• the amount area in the payment part does not look as expected: amount is pushed down and currency does not float to its left

Screenshot for illustration.

Check below styles to understand the meaning of border colors.

#qr-bill {
    border: 1px solid red;
}

#qr-bill-amount-area {
    border: 1px solid red;
}

#qr-bill-currency {
    border: 1px solid blue;
}

#qr-bill-amount {
    border: 1px solid green;
}

#qr-bill-amount h2 {
    border: 1px solid black;
}

#qr-bill-amount p {
    border: 1px solid purple;
}

#qr-bill-currency h2 {
    border: 1px solid red;
}

#qr-bill-currency p {
    border: 1px solid teal;
}

[sprain]

Basically this looks like a positioning issue. You might need to add additional css or settings to make dompdf place the qr bill in the bottom left corner.

Also, many html2pdf converters are not very good. The HtmlOutput of this library is optimized to work with PrinceXML, which is the most powerful html2pdf engine I know of. I have never tried it with dompdf and do not know how it behaves there.

Feel free to re-open this issue if you have more information.

[ckoGH]

In my case, following steps solved the issue:

Insert the bill into a DIV:

<div id="containerBill">
  ...
</div>

Add a CSS extension:

<style>
  #containerBill
  {
    margin-bottom: -1.2cm;
    margin-left: -1.2cm;
    margin-top: 18cm;
  }
  #qr-bill-currency
  {
    float: none !important;
    display: inline-block;
  }
  #qr-bill-amount
  {
    display: inline-block;
  }
</style>