• David OgeGraville
  • NEWBIE
  • 0 Points
  • Member since 2015

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
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