Unwanted extra padding on PDF content

This is a follow up of https://www.syncfusion.com/forums/reply/151983.


I'm using Blink converter to generate a PDF from URL. The PDF has 3 main sections: Content, Header and Footer. The later are generated on a dummy instance first in order to calculate the height. All of these 3 sections can contain multiple other SF controls but I specifically have an issue when rendering the dashboard layout.

As you can see in the attached screenshots, the Content gets rendered with some extra padding to the right on the PDF but if you render that URL alone, it looks just right. I'm not sure what's causing this but I supspect it is related to the page size which can vary for different users on our system so we can't use a fixed size.

Thanks in advance,

Attachment: Spacing_issues_bcde7c24.zip

24 Replies 1 reply marked as answer

GK Gowthamraj Kumar Syncfusion Team November 24, 2020 01:57 PM UTC

Hi Juan, 

Thank you for using Syncfusion products. 

We have checked the provided sample in our end. We were able to reproduce the extra padding added at Pdf content, we suspect that the issue may occurs due to page size varies on different machine. Currently, we are checking this padding issue in our end we will update the further details on November 26th 2020.  

Regards, 
Gowthamraj K 



GK Gowthamraj Kumar Syncfusion Team November 26, 2020 03:53 PM UTC

Hi Juan,   
   
Thank you for your patience.   
  
We have modified the provided sample to overcome the reported issue “Unwanted extra padding on pdf content” by setting the viewport size in our Blink converter settings. We can adjust the HTML content size in the PDF document by using viewport size. Based on the provided size, the content will be scaled in the PDF document. Blink rendering engine will automatically calculate the height of the HTML content based on the provided viewport size. We have tried the below viewport size, which is working properly for the provided sample. Can you please try the conversion with below viewport size and let us know the result.  

// Set viewport size  
settings.ViewPortSize = new System.Drawing.Size(800, 0); 

We have attached the output documents, which is saved from the hosted link and converted from our end with viewport size (800 x 0). Please refer the modified sample and output documents from below link, 

Kindly refer to the below link for more information about Viewport size, 

Note: The default viewport size is 1024 x 0.  
  
Please let us know if you need any further assistance with this. 
 
Regards, 
Gowthamraj K 


Marked as answer

JJ Juan Jiminez November 27, 2020 11:02 PM UTC

That works!

Thanks Gowthamraj, have a good weekend.


GK Gowthamraj Kumar Syncfusion Team November 30, 2020 11:45 AM UTC

Hi Juan, 

Thank you for your update. We are glad to know that your problem has been solved. 

Regards, 
Gowthamraj K 



JJ Juan Jiminez February 4, 2021 04:45 PM UTC

Hi There,

I'm experiencing this same issue while going landscape. I've tried multiple viewport settings with no success. See attached sample.

Attachment: Streching_images_landscape_6c73674d.zip


GK Gowthamraj Kumar Syncfusion Team February 5, 2021 04:07 PM UTC

Hi Juan, 
 
Thank you for your patience.   
  
We have modified the provided sample to resolve the reported header footer stretch issue, please find the modified sample and output PDF document from below links,  
 
 
Please let us know if you need any further assistance on this.   
 
Regards, 
Gowthamraj K 



JJ Juan Jiminez February 5, 2021 05:52 PM UTC

Hi Gowthamraj,

Sorry, I attached the wrong sample, here are the right files with a screenshot showing the spacing issue on landscape mode.

Attachment: Spacing_issues_df897beb.zip


GK Gowthamraj Kumar Syncfusion Team February 8, 2021 12:57 PM UTC

Hi Juan, 

We were able to reproduce the spacing issue with provided sample in our end and we will update the further details on February 10th 2021. 

Regards, 
Gowthamraj K 



GK Gowthamraj Kumar Syncfusion Team February 10, 2021 01:30 PM UTC

Hi Juan, 

Thank you for your patience. 

We have modified the provided sample to overcome the reported issue “Unwanted extra padding on pdf content” in our end. We have attached the sample and output document for your reference. Kindly please try the below sample and let us know the result. 


Please let us know if you need any further assistance with this. 

Regards, 
Gowthamraj K 



JJ Juan Jiminez February 10, 2021 05:19 PM UTC

Hi Gowthamraj,

I'm trying your sample and it doesn't get the extra padding but the generated PDF is not in landscape mode. Portrait mode works well for me, but once I change the print media to landscape, the extra padding is still there.

   @@page {
                size: letter landscape;
            } 


GK Gowthamraj Kumar Syncfusion Team February 11, 2021 05:03 PM UTC

Hi Juan,  

Currently, we are checking the extra padding issue in our end and we will update the further details on February 15th 2021.  

Regards,  
Gowthamraj K 



GK Gowthamraj Kumar Syncfusion Team February 15, 2021 06:35 PM UTC

Hi Juan, 

Thank you for your patience.  

We have checked the reported spacing issue with provided sample, the reported behavior occurs due to overriding the page orientation using page directives in print media. We tried to change the orientation from portrait to landscape in chrome print to PDF for the content HTML, but we could not override.   

The contents are rendered based on the bootstrap styles with page styles, but we forcefully changed the orientation. So, kindly use default orientation from bootstrap and then you can change the orientation of output PDF document using essential PDF. Please refer below KB link for more information,  

Please let us know if you need any further assistance on this. 

Regards, 
Gowthamraj K 



JJ Juan Jiminez February 15, 2021 07:59 PM UTC

Hi Gowthamraj,

I can't remember why but the orientation override on the CSS page directive was suggested by Syncfusion on a previous post. Anyway, if I remove it, not only it doesn't change the PDF's orientation to landscape (relying on the document's settings) but it also breaks the contents layout as you can see on the attached sample.

P.S. Please provide some sample code with your replies so we make sure we're on the same page.

Attachment: Spacing_issues_30ae863e.zip


GK Gowthamraj Kumar Syncfusion Team February 16, 2021 04:18 PM UTC

Hi Juan,    
    
Thank you for your patience.   

Currently, we are modifying the sample with above provided suggestion on our end and we will update the further details on February 18th 2021. 
  
Regards, 
Gowthamraj K 



GK Gowthamraj Kumar Syncfusion Team February 18, 2021 05:49 PM UTC

Hi Juan,     
     
Sorry for the inconvenience caused. 
 
We are still modifying the sample with above provided suggestion on our end and we will update the further details on February 22nd, 2021.  
   
Regards,  
Gowthamraj K 



GK Gowthamraj Kumar Syncfusion Team February 22, 2021 06:10 PM UTC

Hi Juan,      
      
Sorry for the inconvenience caused.  
  
We are facing complexity to modifying the sample with above provided suggestion on our end and we will update the further details on February 24th, 2021.   
    
Regards, 
Gowthamraj K 



GK Gowthamraj Kumar Syncfusion Team February 24, 2021 05:47 PM UTC

Hi Juan, 

Thank you for your patience. 

We have modified the sample with that workaround to change the orientation after the conversion. Please find the modified sample and output PDF document. The content will be scaled based on the new page size with that orientation. We could not get the exact content size while changing the orientation with that workaround.   
 
 
Please try the sample on your end and let us know the result.  

Regards, 
Gowthamraj K 



JJ Juan Jiminez February 24, 2021 06:22 PM UTC

Hi Gowthamraj,

Thanks for the workaround, we're getting closer, however the new landscape PDF looks like a streched version of the Portrait PDF, any way to fix this?


GK Gowthamraj Kumar Syncfusion Team February 25, 2021 12:51 PM UTC

Hi Juan, 

Yes, the landscape PDF will looks like the stretched version of portrait PDF page. As a workaround, we are converting the portrait PDF to landscape using PDF library. This is a limitation of this workaround, we could not overcome this.  

Regards, 
Gowthamraj K 



JJ Juan Jiminez February 25, 2021 02:33 PM UTC

Hi Gowthamraj,

I appreciate taking the time to look at this but unfortunately this is not an acceptable solution, it defeats the purpose of having landscape since the whole point is to fit more data onto the page (not having the same data stretched out), so we'll basically have to stop offering a landscape mode until a suitable solution is provided.

Kindly,

-Juan


PV Prakash Viswanathan Syncfusion Team February 26, 2021 06:49 PM UTC

Hi Juan, 

Thank you for the update.  

To overcome this stretching issue, we need to get the landscape PDF from HTML converter itself, but while checking the given URL in chrome print preview, we could not modify the orientation of the PDF document. It seems it is restricted by styles used in the web page.  

However, we will check the possibilities to have to orientation from HTML converter and update you the further details by March 2, 2021. 

Regards, 
Prakash V 



GK Gowthamraj Kumar Syncfusion Team March 2, 2021 04:21 PM UTC

Hi Juan, 

We have tried modifying the sample to get the landscape orientation in HTML converter, but it is having spacing issue. Kindly try without print media type for landscape orientation, since we are force to use landscape orientation from portrait styles (used in bootstrap styles), the spacing issue occurs. So, we could not proceed further on this.  

Regards, 
Gowthamraj K 



JJ Juan Jiminez March 22, 2021 04:40 PM UTC

Hi Gowthamraj,

We can't remove print media because of some other features that need this mode which are higher priority for us so we decided to just remove landscape mode until it is fully supported with print media. Please let us know if this is fixed at some point. 

Best


GK Gowthamraj Kumar Syncfusion Team March 23, 2021 02:21 PM UTC

Hi Juan, 
 
As we said earlier, we internally make use of chromium executable in headless mode for converting HTML to PDF. It preserves the output PDF document like how the input HTML file/URL is displayed on the Blink-based web browsers (chrome). But the reported issue occurs with chrome headless browser itself. So, once they resolve the reported issue in chromium source and we will check and update you the details on this. 
 
Regards, 
Gowthamraj K 


Loader.
Up arrow icon