Kendo-pdf-export Abnormal Margin behaviour in Multi-Page Pdf

[Sumit]

Hi there,

In Kendo-pdf-export, if an element is given margin-top and it  occupies more than 1 page then the margin-top is applied to the element in all the pages.

The image attached shows the abnormal behaviour.

Sample Code:

<kendo-pdf-export #pdf paperSize="A4" margin="2cm" [scale]="scale">
<div style="margin-top:200px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
</p>
<p>
Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
</p>
<p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p>
<p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p> <p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p> <p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p> <p>
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
</p>
<p>
Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
</p>
</div>

</kendo-pdf-export>

 

Please provide relevant solution ASAP.

[Dimiter Topalov]

Hi Sumit,

I already answered in the private support thread with the same subject, but I will also paste the answer here so other members of the community might benefit too:

Adding the margin to all pages indeed seems counter-intuitive. It is happening because the whole content is wrapped in the container with this margin-top. If you need to provide margin to the first exported page only, you can close the DIV tag immediately and not wrap the other content in it:

https://stackblitz.com/edit/angular-m7askc-nhoqfy?file=app/app.component.ts

I hope this helps.

This being said, I will make sure to discuss the described use case with our PDF Export experts, so that they can try to figure a way to improve the current behavior in the future, if there is a feasible approach that will not cause other undesired side effects available.

On a side note, for future reference - please open one support thread per issue/question only. This will facilitate a tidier support history of your account and better support service. For the currently discussed issue you can choose which of the two threads to continue the communication in if necessary. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter,

A very similar type of question:

I have a document which has the company logo above the header on the first page and every page after just has the header at the top. What I'd need is a bottom margin of 6cm on the first page and a bottom margin of 2cm on every page afterward. I tried hooking the [margin] attribute to a declared object with the first page values (ie. 2cm, 6cm, 2cm, 2cm) and that worked at least for setting the initial values, however my attempts to throw a ternary in the page count to switch to alternate values didn't seem to register.

Let me know if you have any thoughts on whether there's a way that I can set the first page bottom margin higher and the rest at a lower number.

[Dimiter Topalov]

Hello Ron,

Changing the margins dynamically per page is not supported, as the "pageNum" variable is available within the template only. However you can provide an element, holding the logo (that can be optionally shown in the PDF output only, and not visible on the page if the scenario requirements are such):

https://www.telerik.com/kendo-angular-ui/components/pdfexport/content-styling/

... and further customize the template content to add a style/class, applied to the first page only that will offset the header accordingly:

<kendo-pdf-export #pdf paperSize="A4" margin="2cm">
      <ng-template kendoPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
        <div class="pageNum" [class.firstPage]="pageNum === 1">
          HEADER: Page {{ pageNum }} of {{ totalPages }}
        </div>
      </ng-template>
      <div class="pdf-only" style="border: 1px solid red;">Visible on the first page of exported PDF only</div>
      <my-invoice [data]="data"></my-invoice>
    </kendo-pdf-export>

.pageNum {
      font-family: "DejaVu Sans", "Arial", sans-serif;
      position: absolute;
      top: 10px;
      left: 10px;
    }

    .pageNum.firstPage {
      font-family: "DejaVu Sans", "Arial", sans-serif;
      position: absolute;
      top: 6cm;
      left: 10px;
    }

    kendo-pdf-export {
      font-family: "DejaVu Sans", "Arial", sans-serif;
      font-size: 12px;
    }

    .pdf-only {
      height: 0;
      visibility: hidden;
    }

    kendo-pdf-document .pdf-only {
      height: 4cm;
      visibility: visible;
      margin-bottom: 2cm;
    }

https://stackblitz.com/edit/angular-dcmerf-qty8za?file=app/app.component.ts

I hope this helps, but if the scenario and/or the desired behavior is different, please specify in further details how the web page and the exported PDF should look like, ideally sending some similar runnable demo or other visual that will illustrate the use case better, so I can try to provide a solution that is best suitable to the specific scenario, if one is available. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter,

I'd agree that my end goal could be reached in several ways so I'll rephrase the question this way:

I have my quote/invoice in a table format with a repeating header and iterated list for a body. I noticed that when I attempt to insert the company letterhead at the top of the first page it doesn't get reconciled against the page margins, it seems to be about 4cm high and when added it seems to push the kendo-pdf-export margin of 2cm down 4cm, thus causing item lines to run off of the first page.

The primary question in this case would be - how do I get the company letterhead accounted for against the page margins, assuming a consistent height for the header, so that the <tbody> absorbs the 4cm difference and stops 2cm above the bottom of the first page? I'd like to be able to do this without a 6cm margin at the bottom of every page.

[Dimiter Topalov]

Hello Ron,

Thank you for the further insight. This scenario was exactly what I tried to address and demonstrate in my previous response - however, the additional content (e.g. a logo) should be a part of the PDF export content (as opposed to the headers), so that it does not push the content down.

In the last example the additional content is shown in the PDF document only, and the header of the first page only is adjusted conditionally via CSS that is applied to it only so that it appears below the custom additional content, while on every consecutive page, it is in the margin on the top:





If you need the repeating headers of the table too, the example can be adjusted accordingly:

https://stackblitz.com/edit/angular-dcmerf-rbkw7e?file=app/app.component.ts

Still, the custom additional content is visible in the first page only, all margins are the same on all pages, and content is not cut off.

I assume the main reason for a potential misunderstanding so far is that I missed to explicitly point out that the suggested approach implies the arbitrary content (e.g. the logo) needs to be a part of the PDF content, and not of the header template, and the template content should be further positioned accordingly via CSS.

If I am still missing something, we will really need some similar demo/screenshots that demonstrate the desired PDF layout as well as further details about how the PDF output in the example above differs from the desired one, so we can make sure that we are on the same page regarding the desired output.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter,

Based on your response above I played with this a bit more and figured out that one of the primary issues was that I was missing the 'encapsulation: ViewEncapsulation.None'. Past that the kendo-pdf-document .pdf-only class seemed to solve the problem. Thank you for the additional information on this process and apologies for missing the encapsulation piece the first time. Hopefully this thread will at least be helpful for other users in the same scenario.