Center page number in PDF template

[novastream]

Does anyone have a workaround to center {pageNumber} when creating a PDF template?

I guess the issue comes because the pageNumber placeholder is resolved after rendering?

PageNumber placeholder with text-align: center


The number 1 with text-align: center

[shalmaxb]

Hi, this should work:

<p style="text-align:center; font-size: 10px;">{{bankverbindungKuenstler}}<br><br>Seite {pageNumber} von {totalPageNumber}</p>

This shows the Bank account in the footer (but would work the same in body or in a table cell) in the first line

and

Page No. 1 from 2 (if there are more than one page)

[novastream]

Hi, this should work:

<p style="text-align:center; font-size: 10px;">{{bankverbindungKuenstler}}<br><br>Seite {pageNumber} von {totalPageNumber}</p>

This shows the Bank account in the footer (but would work the same in body or in a table cell) in the first line

and

Page No. 1 from 2 (if there are more than one page)

Thank you for your suggestion but it doesn't work. It just ignores the actual width of the element.

<table style="border:1px solid #000000; border-collapse: collapse;" cellpadding="5">
<tr style="border-top:1px solid #000000; border-left:1px solid #000000; border-right:1px solid #000000; width: 85%;">
<td style="font-size: 9px; text-align: left;">
Ordernr
</td>
<td style="font-size: 9px; text-align: left;">
Kundnr
</td>
<td style="border-left: 1px solid #000000; text-align:center; font-size: 9px;">
Sida
</td>
</tr>
<tr style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width: 15%;">
<td style="font-size: 9px; text-align: left;">
<strong>{{name}}</strong>
</td>
<td style="font-size: 9px; text-align: left;">
{{account.customerNumber}}
</td>
<td style="border-left: 1px solid #000000; font-size: 9px; background-color:yellow;" align="center">
<p style="text-align:center; background-color:blue;">{pageNumber} av {totalPageNumber}</p>
</td>
</tr>
</table>

[shalmaxb]

I tested your code here and it works as it is wanted. First image is displaying with the placeholder, the second with numbers I put in.You can see that it adapts to the width as expected.
I tested with a normal HTML file. One hint: Perhaps your formatting of the template (HTML) code is not accepted by the system. I had the experience lots of times with this editor, that small things, which every other editor ignores, in this editor may cause the bad formatting of the result.
Look if you have space characters in your code anywhere, line feed is often not accepted as well

Have a look into the code, when you use the WYSIWYG editor. It is mostly a strange mess and hardly readable. This editor does not like organized code.

I eliminated the blue background for better reading.

[novastream]

I tested your code here and it works as it is wanted. First image is displaying with the placeholder, the second with numbers I put in.You can see that it adapts to the width as expected.
I tested with a normal HTML file. One hint: Perhaps your formatting of the template (HTML) code is not accepted by the system. I had the experience lots of times with this editor, that small things, which every other editor ignores, in this editor may cause the bad formatting of the result.
Look if you have space characters in your code anywhere, line feed is often not accepted as well

Have a look into the code, when you use the WYSIWYG editor. It is mostly a strange mess and hardly readable. This editor does not like organized code.

I eliminated the blue background for better reading.

When using the code in a browser it works as expected but when using the code in a template it gets left aligned. I dont bother using the WYSIWYG editor, I'm using Visual Studio Code and just paste the code.

I've tried using inline CSS and old HTML4 table attributes and even tried the old <center> element without any success

[shalmaxb]

You got me wrong, I did not mean to use the WYSIWYG editor, I do not either. I said to create some template content in the WYSIWYG editor and afterwards look, what a mess that code is in code view (before all in the formatting, everything is messed). This only to see, that a well organized and formatted code, copied from another editor not necessarily will get you to a result.
Again, look if there are any linebreaks or spaces in your code.
Inline CSS does not work at all, will be stripped.

Working with that template engine is a real pain in the ass. Very difficult to get a result with normal HTML, lots of trial and error.

[novastream]

You got me wrong, I did not mean to use the WYSIWYG editor, I do not either. I said to create some template content in the WYSIWYG editor and afterwards look, what a mess that code is in code view (before all in the formatting, everything is messed). This only to see, that a well organized and formatted code, copied from another editor not necessarily will get you to a result.
Again, look if there are any linebreaks or spaces in your code.
Inline CSS does not work at all, will be stripped.

Working with that template engine is a real pain in the ass. Very difficult to get a result with normal HTML, lots of trial and error.

I see and yes it's a pain

Is it possible to disable some of the content filtering options in the WYSIWYG editor? I know you can do it in TinyMCE but is it possible in Summernote?

[shalmaxb]

No, unfortunately not. Believe me, the only way is trial and error. Move your code, delete linefeeds, spaces, forget anything you know for sure regarding HTMl, summernote has its own life.
I made lots of templates already, always the most tedious work, when working with espoCRM, but unfortunately this will not change so fast. The developer of espoCRm already stated, that changing for another template engine would be too much work.

The worst is, you cannot get the "logic" behind the caveats of this editor. Thus once you "learned" to manage it might not be the same the next time.

[novastream]

No, unfortunately not. Believe me, the only way is trial and error. Move your code, delete linefeeds, spaces, forget anything you know for sure regarding HTMl, summernote has its own life.
I made lots of templates already, always the most tedious work, when working with espoCRM, but unfortunately this will not change so fast. The developer of espoCRm already stated, that changing for another template engine would be too much work.

The worst is, you cannot get the "logic" behind the caveats of this editor. Thus once you "learned" to manage it might not be the same the next time.

Thanks, I read through some tcpdf documentation and finally got it working

<td style="border-left: 1px solid #000000; text-align:justify; font-size: 9px; width:54%;">
                            <span style="text-align:right;">{pageNumber} av {totalPageNumber}</span>
                        </td>​

I think I was overthinking it, as a developer you know whats right and wrong and its harder to think outside the box I guess.

Thanks again for your time