Pdf export disable margin for first page

[Chaitra]

Hi,

As I am trying to export pdf on first page only I want to disable the margin to display icon corner page. But due to margin icon is cropping. 

How I can show complete icon on corner when margin kept as 2cm.

I have created stackblitz sample -
https://stackblitz.com/edit/angular-reexcq-48ruxl?file=app/app.component.ts

I have attached exported pdf. How I can disable margin first page or apply z-index for icon to display complete icon

 

[Hetali]

Hi Chaitra,

Instead of setting the margin of the Kendo PDF, set the margin of the content in a <div> tag as follows to prevent the icon from cropping:

<div class='content' style="margin-right: 50px; margin-left: 50px; margin-top: 50px;  margin-bottom: 50px">
      <my-invoice class='page-break' [data]="data"></my-invoice>
</div>

Please take a look at this runnable Stackblitz which does not crop the icon and also sets the margin. 

If you have any further questions about the margin attribute, reply with the details and I'll be happy to further assist you.

Regards,
Hetali
Progress Telerik

[Chaitra]

Hi Hetali,

Thanks for quick reply. I tried the same way by applying the margin for content div. But I have footer on each page which is getting overlapped with the content. How I can stop overlapping content.

https://stackblitz.com/edit/angular-reexcq-nrvahr?file=app/app.component.ts

Please see attached pdf with margin and without margin after adding footer

Thanks

 

[Hetali]

Hello Chaitra,

In order to stop the content from overlapping with the footer, please set the Kendo PDF export margin as follows:

<kendo-pdf-export-margin bottom="2cm"></kendo-pdf-export-margin>

The above snippet will set a 2cm margin in the bottom of all the pages. Here's a Stackblitz example which demonstrates the approach mentioned.

I hope this helps. Please let me know if you have any further questions pertaining to Kendo PDF Export.

Regards,
Hetali
Progress Telerik

[Chaitra]

Hi Hetali,

I have tried suggested way with <kendo-pdf-export-margin bottom="2cm"></kendo-pdf-export-margin>
But I forgot to mention , I have icon on both the corner left top and right bottom like a frame so I want to disable margin on first page or apply z-index so content will come on top of margin. or some other alternative. 

Same way I applied so it is croping the image in bottom ( I have attached the local screenshot. )

But I am not able to reproduce it on stackblitz it is comming bottom image on first on top of margin. So I tried with top margin at that time it is getting crop.

https://stackblitz.com/edit/angular-reexcq-fj3ggf?file=app/app.component.ts

Same thing happening locally due to bottom margin image getting croped on local.

Can you please check it once. I tried multiple ways , even if I kept the similar code with style locally still image is getting cropped from bottom
Thanks

[Chaitra]

Added screenshot and pdf for the above reply

[Chaitra]

Hi Hetali,

I tried here https://stackblitz.com/edit/angular-reexcq-taeyfs?file=app/app.component.ts

But it is giving same issue. Image is getting cropped. If i tired to place content at bottom of page it is going next page and image is getting croped . How image can be always on top of margin I can set

[Hetali]

Hi Chaitra,

Custom CSS is generally out of our scope of support. Although as an exception, in order to have icons in the two opposite corners of the PDF with no margin, please take a look at this StackBlitz example which uses general CSS. 

If you have any questions related to the Kendo PDF Export, I will be happy to assist you further.

Regards,
Hetali
Progress Telerik

[Chaitra]

Hi Hetali,

Thanks for the reply, I have checked the provided link. But with the firefox browser it is not working. I tried with firefox 66.0.1 (64-bit) version.

Need to achieve some functionality with kendo-pdf-export but not able to add due to some problem and need suggestion or a way to achieve it..

Thank you so much in advance.

[T. Tsonev]

Hi Chaitra,

The fundamental problem is that the PDF Export module does not support per-page padding settings. Please, cast your vote for this feature on our Feedback Portal so we can prioritize.

In the meantime, I've updated the sample to:
* Wrap the title page in an element with position: relative - this solves the issue in Firefox
* Use padding for the content as it will get applied on each page.

Check out the updated demo. I hope this helps.

Best Regards,
T. Tsonev
Progress Telerik

[Chaitra]

Hi T. Tsonev,

Thanks for the update , I will vote for the feature on feedback portal.

 

Thanks again !!!!...