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, 11 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 !!

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

    Is there any update on this ?

    Vitali Kurdasov
    Moderator
      2 years, 11 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, 11 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
        2 years, 11 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, 11 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.
          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, 11 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

          Satish
          Participant
            2 years, 11 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, 10 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, 10 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, 10 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.