PDF: Set the element fixed at bottom of the first page

Tagged:
  • Aditya
    Participant
      Has successfully completed the online course Introduction
      Has successfully completed the online course Basics (100)
    2 years, 5 months ago #35406

    Hi Team,

    We have to set the element fixed at the bottom of page 1, if there is some data which can be adjusted above, that is OK, but if the data exceeds the data, then it should be moved to the next page with that element being fixed at bottom of the first page.

    That is the specific element should be fixed at the bottom of the first page irrespective of the data before and after that.

    Thanks in advance !!

    Jennifer Häfner
    Moderator
      Has successfully completed the online course Intermediate (200)
      Has successfully completed the online course Advanced (300)
      Has successfully completed the online course Basics (100)
      Has successfully completed the online course Advanced (310)
      Has successfully completed the online course Advanced (320)
      Has successfully completed the Intermediate Certification
      Has successfully completed the Advanced Certification
    2 years, 4 months ago #35667
    Up
    1
    Down
    ::

    Hi Satish,

    I see two options here:

    1) Add the table header to your header section and remove it from the body (you might have to add an additional margin to the body so that nothing overlaps)

    2) Use the HTML tag ‘thead’, which automatically repeats a table header on every page: https://www.w3schools.com/tags/tag_thead.asp

    Aditya
    Participant
      Has successfully completed the online course Introduction
      Has successfully completed the online course Basics (100)
    2 years, 5 months ago #35430
    Up
    0
    Down
    ::

    Is there any update on this ?

    Vitali Kurdasov
    Moderator
      Has successfully completed the online course Intermediate (200)
      Has successfully completed the online course Basics (100)
      Has successfully completed the online course Advanced (310)
      Has successfully completed the Intermediate Certification
    2 years, 5 months ago #35439
    Up
    0
    Down
    ::

    Hi Aditya,

    do you use Divs to symbolise the pages or any other elements?

    Aditya
    Participant
      Has successfully completed the online course Introduction
      Has successfully completed the online course Basics (100)
    2 years, 5 months ago #35440
    Up
    0
    Down
    ::

    Hi Vitali,

    Yes, we are using the divs to place the elements in the html. But for symbolizing the pages, we are not sure how to do that. Maybe you can help us with that as well.

    Regards,

    Aditya Shukla

    Vitali Kurdasov
    Moderator
      Has successfully completed the online course Intermediate (200)
      Has successfully completed the online course Basics (100)
      Has successfully completed the online course Advanced (310)
      Has successfully completed the Intermediate Certification
    2 years, 5 months ago #35441
    Up
    0
    Down
    ::

    Hi Aditya,

    i don’t have a good answer for this, the only way i found that works is with css for the specific element that you want to have at the bottom.

    My solution is to create a css class that moves that element absolutly:

    .myclass{
    top: 842px;
    transform: translate(50%,-50%);
    right:50%;
    position: absolute;
    }

    Adjust the top pixels by your favor

    Maybe someone else has a better option then me.

    Satish
    Participant
      2 years, 5 months ago #35563
      Up
      0
      Down
      ::

      Hi,

      While using header in pdf template the table header is not repeated on every page. How I can repeat the table header to the table content.
      And text upper part is cut from the next page. How I can resolve this ?

      Thanks!

      Attachments:
      You must be logged in to view attached files.
      Satish
      Participant
        2 years, 4 months ago #35748
        Up
        0
        Down
        ::

        I cannot use table heading on header because data on first page is different.
        Is it possible to dynamically acsess the table header based on page number ?

        And I am using the ‘thead’ for the table header. The table is repeated on every when i don’t write any code header section.

        Jennifer Häfner
        Moderator
          Has successfully completed the online course Intermediate (200)
          Has successfully completed the online course Advanced (300)
          Has successfully completed the online course Basics (100)
          Has successfully completed the online course Advanced (310)
          Has successfully completed the online course Advanced (320)
          Has successfully completed the Intermediate Certification
          Has successfully completed the Advanced Certification
        2 years, 4 months ago #35820
        Up
        0
        Down
        ::

        Hi Satish,

        I figured out a way to display elements in the header dynamically, depending on the current page. You can find the HTML file in the attachments. The elements in the HTML have different classes. In the script that is executed after loading the code, we check on which page we are currently at, and depending on the page number, set the element visible or not.

        To use this file, you need to follow the instructions that I gave in this other thread: https://community.simplifier.io/forums/topic/pdf-set-page-number-dynamically-using-footer-section/

        Which means that you have to:

        • Upload the HTML file to the assets section of your app
        • Use the CSBO ‘SF_PDF’ – ‘generateWithConfig’ to generate the PDF
        • In the input parameter ‘configJSON’, add the path to the header HTML file:
          {
          "header-spacing": 5,
          "header-html": "/opt/simplifier/data/storage/appDirect/test_JH/data/dynamic_header.html"
          }

          (the path might be different for your Simplifier setup, you need the internal path to the file on the Simplifier system)

        • Deploy your app

        Now, the element with the class ‘first’ is only visible on the first PDF page.

        Attachments:
        You must be logged in to view attached files.
        Satish
        Participant
          2 years, 4 months ago #35822
          Up
          0
          Down
          ::

          Hi,

          It would resolve the problem of static header but I need to send dynamic data for those header with JSON.

          As you can see in the screenshot I need dynamic header where data is different every time.

          Thanks !!

          Attachments:
          You must be logged in to view attached files.
          Jennifer Häfner
          Moderator
            Has successfully completed the online course Intermediate (200)
            Has successfully completed the online course Advanced (300)
            Has successfully completed the online course Basics (100)
            Has successfully completed the online course Advanced (310)
            Has successfully completed the online course Advanced (320)
            Has successfully completed the Intermediate Certification
            Has successfully completed the Advanced Certification
          2 years, 4 months ago #35826
          Up
          0
          Down
          ::

          Hi Satish,

          I found a way that hopefully meets the requirements of your use case: instead of specifying the HTML files in the PDF config object, you can directly insert them into the header/footer section of the PDF template. Then, you have access to the JSON data that is given as input for the PDF template.

          With this approach, you do not use the ‘generateWithConfig’ function to generate a PDF, you can simply use ‘generate’.

          For example, you can insert the content of the file ‘dynamic_header.html’ into the header section, and then access the material number etc. from the JSON data.

        Viewing 11 posts - 1 through 11 (of 11 total)

        You must be logged in to reply to this topic.