HTML formatting automatically adding in <br> tags

Support
1

I am adding additional notes using HTML formatting but the PDF looks messy due to additional
tags which keep being added.

I was wondering if there was any way to stop this happening?

Example of my code:

<div style="display:block; background:#125eaa; color:white; width:45%; float:left; padding-right:2.5%; padding-left:2.5%;">
    <span style="display:inline-block; text-align:center;  width:100%">text</span>
    <div style="display:inline-block; width:25%; float:left;">
        <span style="display:block; text-decoration:underline;  width:100%;">Date</span>
        <span style="display:block; width:100%;">23 March 2020</span>
    </div>
    <div style="display:inline-block; width:75%; float:right;">      
        <span style="display:inline-block; text-decoration:underline;  width:70%; float:right;">text</span>
        <span style="display:inline-block; width:70%; float:right;"><b>text</b></span>
        <span style="display:inline-block; width:70%; float:right;">text</span>
        <span style="display:inline-block; width:70%; float:right;">text</span>
    </div>
</div>
<div style="display:block; background:#125eaa; color:white; width:45%; float:right; padding-right:2.5%; padding-left:2.5%;">
    <span style="display:inline-block; text-align:center;  width:100%">text</span>
    <div style="display:inline-block; width:25%; float:left;">
        <span style="display:block; text-decoration:underline;  width:100%;">date</span>
        <span style="display:block; width:100%;">24 March 2020</span>
    </div>
    <div style="display:inline-block; width:75%; float:right;">      
        <span style="display:inline-block; text-decoration:underline;  width:70%; float:right;">Text</span>
        <span style="display:inline-block; width:70%; float:right;"><b>Text</b></span>
        <span style="display:inline-block; width:70%; float:right;">Text</span>
        <span style="display:inline-block; width:70%; float:right;">Text</span>
    </div>
</div>

The code gets a
tag added after every

or and makes the wording run at a slant.

Example

<div style="display:block; background:#125eaa; color:white; width:45%; float:left; padding-right:2.5%; padding-left:2.5%;">
    <br>
    <span style="display:inline-block; text-align:center;  width:100%">text</span>
    <br>
    <div style="display:inline-block; width:25%; float:left;">
    <br>
        <span style="display:block; text-decoration:underline;  width:100%;">Date</span>
        <br>
        <span style="display:block; width:100%;">23 March 2020</span>
    </div>
    <br>
    <div style="display:inline-block; width:75%; float:right;">      
        <br>
        <span style="display:inline-block; text-decoration:underline;  width:70%; float:right;">text</span>
        <br>
        <span style="display:inline-block; width:70%; float:right;"><b>text</b></span>
        <br>
        <span style="display:inline-block; width:70%; float:right;">text</span>
        <br>
        <span style="display:inline-block; width:70%; float:right;">text</span>
    </div>
</div>
<br>
<div style="display:block; background:#125eaa; color:white; width:45%; float:right; padding-right:2.5%; padding-left:2.5%;">
    <br>
    <span style="display:inline-block; text-align:center;  width:100%">text</span>
    <br>
    <div style="display:inline-block; width:25%; float:left;">
        <br>
        <span style="display:block; text-decoration:underline;  width:100%;">date</span>
        <br>
        <span style="display:block; width:100%;">24 March 2020</span>
    </div>
    <br>
    <div style="display:inline-block; width:75%; float:right;">      
        <br>
        <span style="display:inline-block; text-decoration:underline;  width:70%; float:right;">Text</span>
        <br>
        <span style="display:inline-block; width:70%; float:right;"><b>Text</b></span>
        <br> 
        <span style="display:inline-block; width:70%; float:right;">Text</span>
        <br>
        <span style="display:inline-block; width:70%; float:right;">Text</span>
    </div>
</div>
2

Hi @Paul87

It may be worth removing any new lines you’ve put in, as these are automatically converted to <br> tags.

3

@QFMathew thank you for getting back to me.

I have done this and it does remove the BR tags. However, This is a template which I will be editing dependant on the customer and as you can likely see, there can be a decent amount of information needing to be input which would prove very time consuming using this approach, especially if there are multiple invoices to be created.

Are there no, more manageable, options?

4

At this there aren’t any other options I’m afraid, although your feedback will be passed on.

In regards to the <br> tags automatically being added. Not everyone has HTML knowledge and use just basic text there. So a new line (e.g. pressing “Enter”) is treated exactly as that.

5

@QFMathew I appreciate that pressing enter will give a new line and should be treated as such. and essentially, when I am writing the code, I am writing it in a formatted way so that each part takes on a new line.

However, this doesnt give a new line, it infact leaves a blank line and then adds the new line of code below. So where the code should read

text
text
text

(and this is how it would read if typed without HTML)
It infact reads

text

text

text

I have used systems in the past where rather than adding
if there is no HTML is simply takes “enter” as a new

tag

6

Can you insert css in to your code? If so you could write a css line to display hidden br tags

7

@Paul_Courtier Thank you for your reply. I have tried adding br{display:none}
but it basically just removes the tag and shows br{display:none} as text on the page.

I think that, because of the way the PDF is laid out, the code which I am adding is within a

and the table tag hasnt been closed off it isnt allowing for css (just an assumption)
8

@QFMathew @Paul_Courtier Problem solved…
You cant add the CSS in with the HTML for the layout but I found that you can customise the full layout CSS within the invoice customisation as detailed Here so I have added some classes and edited the CSS that way which appears to have solved the problem

1 Like
9

This topic was automatically closed after 7 days. New replies are no longer allowed.