Header and footer overlaps with Ultimate PDF
Question

I am using Ultimate PDF component to generate pdf using URL. The content of the page are overlapping with the footer/header big time. Tried using(below method) but no use. Can someone please help 

CustomMarginSize

Hi, friend. 

I faced this same issue with UPDF, so as another dev friends.

I recommend you to use the SimpleReports component. It worked for me.


Best regards

Lenon Manhães wrote:

Hi, friend. 

I faced this same issue with UPDF, so as another dev friends.

I recommend you to use the SimpleReports component. It worked for me.


Best regards

 Can you please suggest any component that will generate PDF with Reactive Web Application.

 

Satish Kumar wrote:

I am using Ultimate PDF component to generate pdf using URL. The content of the page are overlapping with the footer/header big time. Tried using(below method) but no use. Can someone please help 

CustomMarginSize

 Hi Satish and Lenon,

Can you try css pagebreak in media print.

 

@media print {

  footer {page-break-after: always;}

}

 

Hope this helps.


Thanks

AD

AD wrote:

Satish Kumar wrote:

I am using Ultimate PDF component to generate pdf using URL. The content of the page are overlapping with the footer/header big time. Tried using(below method) but no use. Can someone please help 

CustomMarginSize

 Hi Satish and Lenon,

Can you try css pagebreak in media print.

 

@media print {

  footer {page-break-after: always;}

}

 

Hope this helps.


Thanks

AD

 Hello, AD ,

I tried it but it does not work.


Thank you, Satish

 

I managed it with dirty CSS and media query but if the plugin has something with Header and Footer would have been great, with well documented. I understand but we do have complicated PDF sometime.

I'm working on Reactive application ,

Functionality to be implemented: Print the content in my page into a PDF document with default header and footer.

Implemented the above functionality using media queries and HTML/CSS,

Issue : The middle content of the page is being hidden behind header and footer.


Code:

  /* Styles go here */

.page-header, .page-header-space { 

  height: 100px;

}

.page-footer, .page-footer-space {

  height: 100px;

}

.page-footer {

  position: fixed;

  bottom: 0;

  width: 100%;

  border-top: 0px solid black; 

  background: none; 

}

.page-header {

  position: fixed;

  height: 100px;

  top: 0mm;

  width: 100%;

  border-bottom: 0px solid black; 

  background: none;

  text-align: right;

}

.page {   

    page-break-after: always;    

}

 @page { 

  margin:2mm;

  size:A4;

 @media print {

   thead {display: table-header-group;} 

   tfoot {display: table-footer-group;}

   button {display: none;}

   body {margin: 0;}

   }

Kindly share me inputs to resolve the same in reactive application.


Regards,

Sowndarya

Hi All, 

Still am facing issue in ultimate pdf traditional web, Page number not showing properly



Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.