Problem with invoice layout after update to 5.10.23

Version ie <v5.10.23>

Environment

Checklist

  • Can you replicate the issue on our v5 demo site https://demo.invoiceninja.com or Invoice Ninja? no
  • Have you searched existing issues? yes
  • Have you inspected the logs in storage/logs/laravel.log for any errors?

Describe the bug

After updating, my invoices have a problem with the layout (see attached file), it’s little and the CSS code is showing on the page.
Ps. I didn’t change any other information/configuration in the app.

Screenshots

Can someone help me?

Hi,

I suggest asking in a discussion on GitHub

Hi @hillel ,

Sorry, but, you don’t help by here anymore?
I don’t understand this kind of system, there’s 2 forums and I need to find the good one to post the bugs?

We use the support forum (and Slack/Discord) to provide support for features in the app. We use GitHub to track bugs in the app which this appears to be.

Is this maybe about an qr-code?

I don’t think the problem is directly to the qr-code, because it works when I put back the version 5.11.6 and it always worked.

No, what I mean is, if this long code replaces a sepa-qr-code which was shown before. There’s a new way to make qr-codes visible:

https://github.com/invoiceninja/invoiceninja/discussions/10473

Is the sepa-qr-code the same as the swiss-code?

In general, yes:


Taken from the updated manual-website.

The “data-state”-part is needed to print the qr-code.

1 Like

You saved my ass - thx Schmitti!
data-state=“encoded-html” did the trick…

1 Like

Thanks.
That worked.
Now I need to arrange the position of the Qr-code because I use it on second page and at first I already had some problems to do it.

Thanks again.

Do I understand you correctly that you want to have the QR-code always be drawn on a single last page? This should be possible by using the css-code break-before: always; – I think. I’m no coder, so I have to guess.
However, this should look like the following, if I’m thinking rightly now:

<head>
(...)
<style>

.sepa-qr-code {
  (...)
  break-before: always;
}

</style>
</head>

<html>
(...)
  <div class="sepa-qr-code" data-state="encoded-html">
    $swiss_qr
  </div>
(...)   
</html>