rendered pdf not showing data table formatting

Having a couple issues with CSS and VisualForce datatable formatting.

I am rendering a visual force page using a seperate page with renderAs="pdf". This just makes it easier to maintain just what I need to display. The visualForce page saves as a pdf attachment on the main account record. However when I view the stored PDF the datatable formatting is not displaying as it is on the main VF page.

How can I maintain the solid border and font colors on the rendered pdf ?
Also, how can I control the cell padding using CSS instead of using the cellpadding parameter on the datatable tag. Is there a way to automaically scale the data table width should a table be long ?

Main Visual Formce Page - PROD_UW_AccountSummary
Main visual force page with proper table rendering.

<apex:page standardStylesheets="true"  standardController="Account_Summary__c" readOnly="false" extensions="AccountSummaryController"  >
<apex:stylesheet value="{!URLFOR($Resource.pdfcssresource, 'CREresource_CRE.css')}"/>
......
 <apex:pageBlockSection columns="1" id="section2b" title="* Expiring Excess of Loss Contract Information" showHeader="true"  >  
    <apex:outputPanel id="out2b" >
       <apex:actionstatus startText="loading...">
           <apex:facet name="stop" >
              <apex:outputPanel >
                  <apex:dataTable styleClass="alldatatables" value="{!contractSectionList}" var="cs" cellpadding="5" rowClasses="alldatarows"  >
                       <apex:column value="{!cs.MR_Contract__c}" headerValue="Contract"  />
                       <apex:column value="{!cs.Name}" headerValue="Section"/>

Saved PDF Page - PROD_UW_AccountSummary_PRT
saved pdf file

<apex:page standardStylesheets="false" standardController="Account_Summary__c" readOnly="false" extensions="AccountSummaryController" renderAs="pdf" >
<apex:stylesheet value="{!URLFOR($Resource.pdfcssresource, 'CREresource_CRE.css')}"/>
.....
<apex:pageBlockSection columns="1" id="section2b" title="* Expiring Excess of Loss Contract Information" showHeader="true"  > 
    <apex:outputPanel id="out2b" >
      <apex:actionstatus startText="loading...">
           <apex:facet name="stop" >
              <apex:outputPanel >
                   <apex:dataTable styleClass="alldatatables" value="{!contractSectionList}" var="cs" cellpadding="5" rowClasses="alldatarows"  >
                       <apex:column value="{!cs.MR_Contract__c}" headerValue="Contract"/>
                       <apex:column value="{!cs.Name}" headerValue="Section"/>

CSS file: CREresource_CRE.zip

/*
table, th, td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
}


th, td {
    padding: 15px;
    order-bottom: 1px solid #ddd;
   }

th {
    text-align: center;
    font-weight: bold;
    /* white-space: nowrap; */
}

td {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 100%;   
    vertical-align: middle; 
}
*/


tr:hover {background-color: #f5f5f5}


.alldatatables {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 100%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: blue;

}

.alldatarows {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 100%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 15px 15px 5px 5px;
}

.alldatacols {
    border-collapse: collapse; 
    border: 1px solid black;
    }

@page {
/* Landscape orientation */
size: ledger landscape;

/* Put page numbers in the top right corner of each
   page in the pdf document. */
@bottom-right {
 content: "Page " counter(page) "of " counter(pages);
}
   margin-top:3cm;
   margin-left:2.54cm;
   margin-right:2.54cm;
   margin-bottom:3cm; 
}

Main Visual Formce Page - PROD_UW_AccountSummary

December 29, 2016
·
Answer
·
Like
0
·
Follow
2

Sumit Kumar Singh 9
Hello Rick MacGuigan,

This is the problem with salesforce while rendering the pdf. Instead of using CSS in seperate file, please specify the css at root node, like this -

<apex:page controller="TestRenderPdf" renderAs="pdf"> <apex:pageBlock > <apex:dataTable value="{!conList}" var="c" style="border: 1px solid black;"> <apex:column value="{!c.id}" style="padding: 15px;order-bottom: 1px solid #ddd;border: 1px solid black;" /> <apex:column value="{!c.name}" style="padding: 15px;order-bottom: 1px solid #ddd;border: 1px solid black;"/> </apex:dataTable> </apex:pageBlock> </apex:page>
The output is -

If you are not acheiveing whatever you want using DataTable, then you can try <apex:repat> and generate the table using HTML tags and CSS.
Hope, it will help you.

Thnaks,
Sumit Kumar Singh

December 29, 2016
·
Like
0
·
Dislike
0

Rick MacGuigan
Thanks for your reply. Is this because SalesForce cannot read the static resource CSS file ? Can I call the CSS class if the entire style is loaded on the rendered PDF page rather than adding the styles directly on the tag elements ?

December 30, 2016
·
Like
0
·
Dislike
0

Rick MacGuigan
Sumit, read where using external static resources don't work with renderAs PDF so that solves that mystery. So I tried to simply add the css into the rederAs VF page thinking the PDF would pick up the class instead of coding the css into the tags.Still did not work. Is this not even possible?

<apex:page standardStylesheets="false" standardController="Account_Summary__c" readOnly="false" extensions="AccountSummaryController" renderAs="pdf" > <head> <style> tr:hover {background-color: #f5f5f5} .alldatatables { text-align: right; font-family: 'Arial'; font-size: 100%; vertical-align: middle; border-collapse: collapse; border: 1px solid black; padding: 5px 5px 5px 5px; color: blue; } .alldatarows { text-align: right; font-family: 'Arial'; font-size: 100%; vertical-align: middle; border-collapse: collapse; border: 1px solid black; padding: 15px 15px 5px 5px; } .alldatacols { border-collapse: collapse; border: 1px solid black; } .odd { border-bottom: 1px solid #000; padding: 1px 1px 2px 2px; background-color: #0099FF; } .even { border-bottom: 1px solid #000; padding: 1px 1px 2px 2px; background-color: #33CCCC; } @page { /* Landscape orientation */ size: ledger landscape; /* Put page numbers in the top right corner of each page in the pdf document. */ @bottom-right { content: "Page " counter(page) "of " counter(pages); } margin-top:3cm; margin-left:2.54cm; margin-right:2.54cm; margin-bottom:3cm; } </style> </head>

<apex:pageBlockSection columns="1" id="section2b" title="* Expiring Excess of Loss Contract Information" showHeader="true" > <apex:outputPanel id="out2b" > <apex:actionstatus startText="loading..."> <apex:facet name="stop" > <apex:outputPanel > <apex:dataTable styleClass="alldatatables" value="{!contractSectionList}" var="cs" cellpadding="5" rowClasses="alldatarows" > <apex:column value="{!cs.MR_Contract__c}" headerValue="Contract"/> <apex:column value="{!cs.Name}" headerValue="Section"/>

December 31, 2016
·
Like
0
·
Dislike
0

Rick MacGuigan
Also, this helps from https://developer.salesforce.com/forums/?id=906F000000095UrIAI

In version 28.0 and above, for the styles to be honoured by the PDF engine the markup has to be valid. Using version 28.0 or above the below VF page renders in landscape.

<apex:page renderAs="PDF" applyBodyTag="false" applyHtmlTag="false" showHeader="false">
<html>
<head>
<style>
@page{
size: A4 landscape;
}
</style>
</head>
<body>
<h1>Testing Landscape</h1>
Rendering PDF as Landscape
</body>
</html>
</apex:page>