Support

Home Forums Event Espresso Premium Layout error on PDF Invoice

Layout error on PDF Invoice

Posted: September 20, 2018 at 6:07 am


ThomasHowie

September 20, 2018 at 6:07 am

In following instructions from this post, I’ve encountered an unusual layout issue.

The HTML version of the invoice displays correctly: https://imgur.com/wD9om37

However, the PDF version looks like this: https://imgur.com/8GatvAH

I’ve double checked the HTML and it’s all valid.

The issue arises when I add the following code to the [TICKET_LIST] field:


<ul class="event-dates">[DATETIME_LIST]

and this the code to the [DATETIME_LIST] field:

  • [DATETIME_START] - [DATETIME_END] ([DATETIME_TIMEZONE]) <br />
    <p class="ticket-note">[DTT_DESCRIPTION]</p>
  • Somehow that seems to be breaking the table layout, but only on the PDF version of the invoice.

    I should also point out that the post I’ve linked to above suggests putting [ATTENDEE LIST] inside [TICKET LIST], which isn’t allowed, so I’ve left that out.

    Also, I am working with the Purchaser template.

    Has anyone experienced a similar error? Could it be something to do with the way the PDF is being rendered? Any help would be greatly appreciated as my client has a lot of invoices to process and can’t send them out like this.

    Thanks.


    ThomasHowie

    September 20, 2018 at 6:12 am

    Apologies, I messed up the code quoting. I’ll try again.

    The issue arises when I add the following code to the [TICKET_LIST] field:

    <ul class="event-dates">[DATETIME_LIST]
    

    and this the code to the [DATETIME_LIST] field:

  • [DATETIME_START] - [DATETIME_END] ([DATETIME_TIMEZONE]) <br /> <p class="ticket-note">[DTT_DESCRIPTION]</p>

  • ThomasHowie

    September 20, 2018 at 6:14 am

    OK, one more try!


    Josh

    • Support Staff

    September 20, 2018 at 7:12 am

    Hi,

    This comes down to how browsers will ignore invalid html, and how DOMPDF requires valid html. Since you’re adding the datetime list inside a table, the list must be wrapped in a table row & table cell. Again, browsers will ignore this, but DOMPDF will not. So the quick fix is just wrap the list in table markup like so:

    <tr>
    <td colspan=5>
    <ul class="event-dates">[DATETIME_LIST]</ul>
    </td>
    </tr>


    ThomasHowie

    September 20, 2018 at 8:27 am

    Amazing, thank you!

    I thought it might be that and tried something similar, but I must have got it wrong because it didn’t work, so I moved on.

    The support post ‘Layout error on PDF Invoice’ is closed to new replies.

    Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

    Support forum for Event Espresso 3 and Event Espresso 4.
    Documentation for EE3 and EE4
    Documentation for Event Espresso 3

    Documentation for Event Espresso 4

    Status: closed

    Updated by  ThomasHowie 1 year, 1 month ago ago

    Topic Tags

    Notifications

    This topic is: resolved
    Do NOT follow this link or you will be banned from the site!
    [for="input_96_5_3"]
    [for="input_96_5_3"]
    [gravityform id=96 title=false description=false]
    • This field is for validation purposes and should be left unchanged.
    [i]
    [i]
    [gravityform id=69 title=false description=false]
    • This field is for validation purposes and should be left unchanged.