How to keep space between two image in print format?

Hello Everyone,
I want to a space between two images in the print format using for loop, so anyone can me about this.

Usually you can add a <br> tag after the <img> tag inside the loop

I tried it but it doesn’t work.

Hi @rutikarathod1308,

Please try it like.

<table>
    {%- for row in doc.items -%}
    <tr>
        <td>
            <img src = ".......">
        </td>
    </tr>
    {%- endfor -%}
</table>

Then reload and check it.
Maybe it works.

Thank You!

I tried the same but it also doesn’t work


are KEYBOARD004 and KEYBOARD005 the same items?
and is KEYBOARD002 a different item?

And Why <br> show?

KEYBOARD004 and KEYBOARD005 are serial number of one item.
and KEYBOARD002 are serial number of a different item.

Hi

Yes I think using a table wont work… Serial no. is text type… with no index… if I am not wrong.

Try this … remove the table and its associated tag and use like below with a non breaking space (&nbsp)…

<div>
{% for row in doc.items %}
<img src = "......."/> &nbsp &nbsp
{%- endfor -%}
</div>

Since i dont have a serial no. to try this on you would need to post the screenshot

Update: I don’t think this would work also as the space or break will only be between items and not the serial numbers as we are only looping the items and not the serial numbers

1 Like

Hmm right :thinking:,

The problem in img tag src="https://barcode.tec-it.com/barcode.ashx?data"

When you print the serial number then will separately print but when you print in tag of

<img src="https://barcode.tec-it.com/barcode.ashx?data= {{row.serial_no}}"/>

then will merge the print with the barcode.

I think it’s not possible to print separately but using js, maybe is possible for it.

I know this is a long shot…

could you try like this using css overflow wrap

<div>
{% for row in doc.items %}
<div style="overflow-wrap: break-word;">
    <img src = "......."/>
<div>
{%- endfor -%}
</div>

Tried this but didn’t work