You need to sign in to do that
Don't have an account?
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
Saved PDF Page - PROD_UW_AccountSummary_PRT

CSS file: CREresource_CRE.zip
Main Visual Formce Page - PROD_UW_AccountSummary
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
<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
<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
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 -
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
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>