Issue with footer

[Ahmad-A2Z-Orders]

Suddenly yesterday something happened in the footer
I don’t know if it’s because of an update or something else

The code has been working perfectly for me for the past year till yesterday:

Now this is what happened:

[Joe91]

Deleted as incorrect - I read html code incorrectly

[Ahmad-A2Z-Orders]

Still same issue

[Mabaega]

Your code looks great in cloud v24.7.17.1734
I actually want to know the first and second lines of your code. I think you don’t need that.

</tbody>
</table>
<div style="position:relative;text-align:center;border:0px solid black; float:right; width:250px; height:90px;">
  <div style="position: absolute; top: 0; right:0; left:0;"><b>Name & Signature الاسم و التوقيع</b></div>
  <div style="position: absolute; bottom: 0; right:0; left:0;"><i>...........................</i></div>
</div>

[Ahmad-A2Z-Orders]

The first and second lines are for the signature location on the invoice
If you delete them, the signature will appear above the QR code
For this, I put it on the other side so that it does not cover the customer’s signature on any part of the QR code

[Mabaega]

hmm… on me,
Your code without the two lines above gives the same appearance on the screen. The two lines above will be automatically discarded when rendering.

or maybe you use Custom Themes?
If true, maybe there is something wrong with your custom themes

[lubos]

@Ahmad-A2Z-Orders

The first and second lines are for the signature location on the invoice

@Ahmad-A2Z-Orders in previous version, when Footers contained invalid HTML, Manager would still accept it and inject it in your invoice “as is”. Sometime invalid HTML would ruin the entire screen.

I see what you are trying to do but it’s still invalid HTML.

I’m working on QR code to be basically also a footer so that way you can place it above another footer.

[Ahmad-A2Z-Orders]

@lubos @Mabaega @Joe91

Please, I need a little help

Now use this code and it works
But I need to place it next to the QR code so that it does not take up space in the paper and become longer to the bottom
The old code that I was using, as I mentioned at the beginning of the post, was next to the QR code

What should I change in the code?

[lubos]

@Ahmad-A2Z-Orders currently it’s not possible. But you gave me an idea that we could support ability to inject footers into different footers using merge tags. This way if there is a built-in footer like QR code, you could inject it into your custom footer and control exactly where QR code is visible.

[Mabaega]

for now, try this

<table class="w_full" style="padding: 20px; width: 100%; text-align: center; vertical-align: top;">
    <tr>
      <td >
        <strong>Name اسم</strong>
      </td>
      <td>
        <strong>Position المنصب</strong>
      </td>
      <td rowspan=2 id="tdqr" style="width: 128px;"></td>
      <td>
        <strong>Signature التوقيع</strong>
      </td>
      <td >
        <strong>Date التاريخ</strong>
      </td>
    </tr>
    <tr>
      <td style="padding-top: 100px">
        <strong>....................</strong>
      </td>
      <td style="padding-top: 100px">
        <strong>....................</strong>
      </td>
      <td style="padding-top: 100px">
        <strong>....................</strong>
      </td>
      <td style="padding-top: 100px">
        <strong>....................</strong>
      </td>
    </tr>
  </table>
  
  <div id="moveqr">
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var qrcodeDiv = document.getElementById('qrcode');
            if (qrcodeDiv) {
                var qrcolumn = document.getElementById('tdqr');
                if (qrcolumn) {
                    qrcodeDiv.removeAttribute('style');
                    qrcolumn.appendChild(qrcodeDiv);
                }
            }
            const proseDiv = document.querySelector('.prose');
            if (proseDiv) {
                proseDiv.removeAttribute('style');
                proseDiv.className = '';
            }
            var moveqrDiv = document.getElementById('moveqr');
            if (moveqrDiv) {
                moveqrDiv.remove();
            }
        });
    </script>
</div>

[Ahmad-A2Z-Orders]

Thanks, brother

[shahabb]

I thought you are planning on implementing it like this.