[Simple Reports With PDF] Download PDF different to preview - overlapping footer
Forge component by Huarlem Lima

We have implemented this tool to generate application reports. The reports have a footer that is larger than the out of the box example, 2.5cm, which we adjusted using the CSS within the application. The view on the screen looks great, the data display perfectly. We have a problem when we click the download icon on the Print Menu.

Our issue is that some rows of data are hidden by the footer and not displayed on the page. By changing the stylesheet "overflow : visible" instead of hidden, we were able to see the data so we knew the data was not lost.

I have tried everything I can think of to resolve this issue without success. Any change we make to the stylesheet impacts on the preview version which we dont want as it is perfect. What I think I need is a way to tell the "IsInPageAge" javascript function, that the footer is larger but I have no idea how to do this. Or perhaps a way to pass the footer height to the download PDF option, again which I have no idea how to do. 

I need a resolution to this ASAP so any assistance you can give would be greatly appreciated.

I have attached screen shots of the issue that shows what the preview looks like and what the downloaded PDF result is. Obviously we need these to be the same.


Hi Jacqui, 

use the css parameter "-webkit-print-color-adjust: exact" associated with @media print. They let you know that you want to see in print exactly how it is viewed.


.cssFooter {
     background-color: # f0f0f0;
     -webkit-print-color-adjust: exact;

@media print {    
         .cssFooter {
          background-color: # f0f0f0;
          -webkit-print-color-adjust: exact;

I hope that helps.

Hi Thiago,

Thanks for your reply. The changes you suggested affected the version that is displayed in the Print Dialog window but the downloaded PDF still has the footer overlap the table on the page.

Do you know if it is possible to pass parameters to the PDF conversion engine? If I could tell it the height of the footer I think my problem would be solved.


Hey Jacqui

The same thing was happening with a list record for me and I added this into the css and it solved the problem for me, hope it helps!

.Page.A4.Landscape {  
    page-break-after: always;


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