Announcement

Collapse
No announcement yet.

Center page number in PDF template

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Center page number in PDF template

    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
    Click image for larger version

Name:	thumb_8151.jpg
Views:	255
Size:	5.2 KB
ID:	85436

    The number 1 with text-align: center
    Click image for larger version

Name:	thumb_8153.jpg
Views:	260
Size:	4.9 KB
ID:	85437​​

  • #2
    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)​

    Comment


    • #3
      Originally posted by shalmaxb View Post
      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.

      Click image for larger version

Name:	thumb_8157.jpg
Views:	251
Size:	5.7 KB
ID:	85442
      Code:
      <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>
      ​​

      Comment


      • #4
        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.

        Comment


        • #5
          Originally posted by shalmaxb View Post
          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

          Comment


          • #6
            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.

            Comment


            • #7
              Originally posted by shalmaxb View Post
              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?

              Comment


              • #8
                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.

                Comment


                • #9
                  Originally posted by shalmaxb View Post
                  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

                  Code:
                  <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

                  Comment

                  Working...
                  X