Trouble with PDF Output for Barcodes

Greetings,

I am trying to create a PDF with a barcode. So far, i have been able to create ONE specirfic barcode with a Specific ID (123456)

When i try to create the PDF for the barcode with an id of 123456789, when it goes to the PDF it seems that all the whitespace has collapsed or it is running into itself.

I am at a loss as to why the one barcode outputs to pdf just fine but the second does not. I am using the same library to create both. Also I have tried without the dash with the same results

Here is the code for the HTML (html to PDF) that I am using to created the first barcode:

<div id="inputdata">
<div style="text-align:center">
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.06in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.02in solid white;height:0.25in;display:inline-block;"></span>
<br><span style="font-family : arial; font-size:12pt">*123456L*</span>
</div>
</div>

Here is the code I am using for the longer barcode. It looks fine on screen then when sent to PDF it does not work.

<div id="inputdata">
<div style="text-align:center">
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left :0.03in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid black;height:0.25in;display:inline-block;"></span>
<span style="border-left:0.01in solid white;height:0.25in;display:inline-block;"></span>
<br><span style="font-family : arial; font-size:12pt">*123456789-1231*</span>
</div>
</div>

Hi,

We need more info in order to look into this. Please post the following:

1/ The part of your code that calls our API.
2/ The complete HTML document (not only the barcode part) that is sent to the API.