Issue where table cells overlap when they should not - PDF Templates

[nsoftware-george]

1. No specific errors.
2. See below for steps.
3. EspoCRM 8.4.2
4. PHP 8.1.2-1ubuntu2.19
5. MySQL Server 8

-- The Issue --

I suspect there may be an issue in how dompdf and/or how EspoCRM uses dompdf renders certain tables when converting from the HTML templates to a PDF.

Recently I converted some HTML templates used in our previous CRM software. It was straight-forward, only requiring swapping out the entity/field names. The template seemed to work, except for one difference: the boxes used to display billing and shipping contact information, which normally are side-by-side in a , overlap for some reason.

Examining both the data for the contacts as well as the template HTML did not reveal any obvious reason for the overlap. As a test, I tried simply having empty billing/shipping contacts, which still caused the boxes to overlap. This is why I think it may have to do with dompdf.

Other evidence that suggests the issue may be caused by our data, rather than dompdf, is that the overlap always happens with specific invoices, but never happens with other invoices.

There are attached samples which are generated from dummy data. All were generated in EspoCRM. Included is also the template HTML.

Any help is appreciated. I can possibly pull the test input data from the DB as well if required for a reproduction case.

[emillod]

It's wrongly rendered the column which you wanted to be a space between both columns. You can try to add in this empty column   or br

[nsoftware-george]

Adding various combinations of &nbsp and <br> <br /> did not work. I also tried removing the extra <td> to no effect. Thank you for the suggestions.

Happy to hear any other suggestions.

Obviously if I figure out a workaround I will post it back here.

[shalmaxb]

are you sure, that in configuration of espoCRM you choose DOMPDF as engine? Only to exclude a reason.

[yuri]

I'd try to duplicate the template and delete all except the problem part. Then it would be easier to find out what causes the layout problem and take less effort for others to help.

[nsoftware-george]

Thanks Yuri and everyone with suggestions. The problem is now solved.

Attached is the smallest set that looks identical to the original and no longer has the overlap issue.

It is hard to say for sure, but I believe the issue is related to having nested tables. This is the table element structure for the template that overlapped.

<table>
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <th>Billing Info</th>
            </tr>
            <tr>
              <td>ATTN: ACCOUNTS PAYABLE</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td></td>
      <td>
        <table>
          <tbody>
            <tr>
              <th>End User</th>
            </tr>
            <tr>
              <td>The End User</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

This is the table element structure for the template that does not overlap:

<table>
  <tbody>
    <tr>
      <th>Billing Info<br></th>
      <th><br></th>
      <th>&nbsp;End User<br></th>
    </tr>
    <tr>
      <td>ATTN: ACCOUNTS PAYABLE<br></td>
      <td><br></td>
      <td>The End User</td>
    </tr>
  </tbody>
</table>​

The working example is much simpler.