[Ultimate PDF] Reactive web - Only getting the first A3 page of content

I am using UltimatePDF with a reactive web application. The file generated and downloaded (via PrintToPDF action), however I only get the first page of that file. I use a A3 size, because I need enough width to display the table info. I tried the solution proposed on this post but putting " size: auto;" truncated my pages (mainly width problems due to A4 format automatically generated), but I have i'll the pages. DO you know how to combine multiple pages and A3 portrait format ? 


Here are the CSS parameters I use :

/* CSS for Reactive Printing */

@media all {
  .page-break {
    display: none;
  }
}
 
@media print {
  html, body {
    height: 100% !important;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
  }
}
 
@media print {
  .page-break {
    margin-top: 1rem;
    display: block;
    page-break-before: auto;
  }
}
 
@page {
  size: A3;
  margin: 10mm;
}

Hey AJ, thanks for you help. I finally found a solution. The problem was indeed generated by the Max-Height property of my pop-pup CSS. I over-wright putting a Max Height in the PDF itself. 

/* CSS for Reactive Printing */

 @page {
    size: A3;
    margin: 0;
}

.cm.popup-dialog-body {
    max-height: 100% !important;
    overflow: initial;
}

@media all {
  .page-break {
    display: none;
  }
}
 
@media print {
  html, body {
    height: initial;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
    background: rgba(192,192,165,.2);
    background-color: #fff;
  }
}
 
@media print {
  .page-break {
    margin-top: 1rem;
    display: block;
    page-break-before: auto;
  }
}

 thanks a lot for help. 


KR 

Julien Crepin

Hello @Julien Crepin,

If you change "height: 100% !important;'

to "height: initial !important;"

that should print all the pages.

Regards,

AJ

Hello AJ, 

Thanks for your swift answer. 

Unfortunately this is not working, because the initial refers to a pop up that have a max height set to 500px. So With "height: initial !important;"  I only display 500px of height, which is even worst... 

Is it possible to set the height to the value of the table height ? 

Could you please elaborate a bit on your design so I can try and reproduce it. Basically I wanted to know how the pop up is associated to what is being printed. Thanks,

AJ

Hello,

It is a table that is created in a pop up window. The PDF creation button is inside the popup block. And it seems than
The goal is to print in PDF the whole table in a A3 or (A4 but then zoom out the table). As I need An A3 format I change the size of the Page in A3, but then the "height: initial !important;" parameter refers to the pop up height witch is 500px;
so that's why I'm looking for another option. I tryed 100´% but still only the first page is displayed, if I put 150% it is "ok" but it generates blank pages at the bottom.

Is it clearer now ? 

Thanks Julien, its clearer but have a follow up question. If the table you would like to print to PDF is inside a pop up window, what are you passing for the 'URL' parameter since you would typically pass the URL for a screen.  A screenshot would help if possible.

Hello AJ,

I'm passing the URL of the screen where the PDF is genrated. That' precisely in the stylesheet of the screen that I'm passing the CSS code put on top. I can't share any screenshot, sorry. I know that it would have helped. Tell me If I need to provide more info.


Thanks.


Hey AJ, thanks for you help. I finally found a solution. The problem was indeed generated by the Max-Height property of my pop-pup CSS. I over-wright putting a Max Height in the PDF itself. 

/* CSS for Reactive Printing */

 @page {
    size: A3;
    margin: 0;
}

.cm.popup-dialog-body {
    max-height: 100% !important;
    overflow: initial;
}

@media all {
  .page-break {
    display: none;
  }
}
 
@media print {
  html, body {
    height: initial;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
    background: rgba(192,192,165,.2);
    background-color: #fff;
  }
}
 
@media print {
  .page-break {
    margin-top: 1rem;
    display: block;
    page-break-before: auto;
  }
}

 thanks a lot for help. 


KR 

Julien Crepin

That's great! Thanks for sharing your final resolution. I would suggest taggin your post as the Solution.

Regards,

AJ

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