Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Danny IncompanyDanny Incompany 

CSS not rendering when using renderas="pdf"

Hi,

We have create a visualforce page attached to a button so users can print pdf with fields on object. The problem I am having is that when I use renderas="pdf", for some reason the stylesheet indicated is not rendering properly.

I have tried using the css in two forms, by url and by uploading it as a static resource, as you can see on lines 13 and 14 on the below code. Also I have tried using the tag "applyHtmlTag" with value false to see if this helps, also I have tried changing the api version and duplicating the vf page and nothing seems to work.

Any ideas on how I can make the css work? If I remove the renderas="pdf" tag the css shows properly. Thanks!

<apex:page standardController="Boleta_Manual__c" renderAs="pdf">

<html lang="en">
    <head>
    <style type="text/css">
            @page {
        size: 13in  21in ;
          }
          
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>factura</title>
        <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
              <!--<apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'css/bootstrap.min.css')}"/>-->
    </style>
     
        
    </head>
    <body>
        <div class="container" id="page">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                        <apex:image value="{!$Resource.setelHeader}"/>  
                        </div>
                        <table id="table-2"  class="table table-straped table-bordered">
                            <thead>
                            <tr>
                                <th>Boleta Setel</th>
                                <th>Distribuidor</th>
                                <th>Espeficique Otro</th>
                                <th>Boleta Cliente</th>
                            </tr>
                            </thead>
                            <tbody>
                                
                                <tr>
                                    <td><apex:outputField value="{!Boleta_Manual__c.name}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Distribuidor__c}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Espeficique_Otro__c}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.BoletaCliente__c}"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="panel panel-default">
                        <table class="table table-straped table-bordered">
                            <thead>
                                <tr>
                                    <th>Modelo</th>
                                    <th>IMEI</th>
                                    <th>Falla reportada</th>
                                    <th>Accesorios</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Modelo__c}"/></td>                    
                                    <td><apex:outputField value="{!Boleta_Manual__c.IMEI__c}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Falla_reportada__c}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Accesorios__c}"/></td>
                                </tr>
                                
                            </tbody>
                        </table>
                    </div>

                    <div class="panel panel-default">
                        <table class="table table-straped table-bordered">
                            <thead>
                            <tr>
                                <th>Estado</th>
                                <th>Razón</th>
                                <th>Técnico</th>
                                <th>Cliente</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Estado__c}"/></td>                    
                                    <td><apex:outputField value="{!Boleta_Manual__c.Raz_n__c}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.T_cnico__c}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Cliente__c}"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="panel panel-default">
                         <table class="table table-straped table-bordered">
                            <thead>
                                <tr>
                                    <th>Observaciones</th>
                                    <th>Descripción de la reparación</th>
                                    <th>Producto Recibido</th>
                                    <th>Fecha de salida</th>
                                    <th>Owner</th>
                                    <th>Last Modified By</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><apex:outputField value="{!Boleta_Manual__c.OBSERVACIONES__c}"/></td>                    
                                    <td><apex:outputField value="{!Boleta_Manual__c.Descripci_n_de_la_reparaci_n__c}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.ProductoRecibido__c}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Fecha_de_salida__c}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Owner.name}"/></td>
                                    <td><apex:outputField value="{!Boleta_Manual__c.name}"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="panel panel-default">
                         <table class="table table-straped table-bordered">
                            <thead>
                                <tr>
                                    <th>Codigo de Pieza</th>
                                    <th>Descripción del Producto</th>

                                    <th>Precio Costo Unidad</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                    <!-- Aqui Valores de el Servicio #1 -->
                                <apex:repeat value="{!Boleta_Manual__c.Piezas__r}" var="pr">
                                   <tr>
                                    <td><apex:outputField value="{!pr.Name}"/></td>
                                    <td><apex:outputField value="{!pr.Producto__r.Descripci_n__c}"/></td>

                                   <td><apex:outputField value="{!pr.Producto__r.Precio_de_compra__c}"/></td>
                                   <td><apex:outputField value="{!pr.Estado__c}"/></td>
                                </tr> 
                                </apex:repeat>
                            </tbody>
                        </table>
                    </div>

                    <div class="panel panel-default">
                         <table class="table table-straped table-bordered">
                            <thead>
                                <tr>
                                    <th>Diagnostico</th>
                                   
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><apex:outputField value="{!Boleta_Manual__c.Diagnostico__c}"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
            
        </div>
    </body>
</html>

</apex:page>


bob_buzzardbob_buzzard
Your header element seems a little confused - you have includes and meta tags nested inside a style tag.  I think you need to replace:

<style type="text/css">
  @page {
        size: 13in  21in ;
          }

           
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>factura</title>
        <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
              <!--<apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'css/bootstrap.min.css')}"/>-->
</style>
with

<style type="text/css">
  @page {
        size: 13in  21in ;
          }
</style>
           
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>factura</title>
        <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
              <!--<apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'css/bootstrap.min.css')}"/>-->
ManzaManza

Hey Danny

Where you able to make this work? Did bib suggestion work for you?

unfortunately the suggestion doesnt work for me, but I want to confirm with someone else if the issue is mine.

Thanks
Danny IncompanyDanny Incompany
Hey Manza, thanks!!

Can't remember which project was this, however I found another project where the PDF is rendering correctly, also you may want to check out this documents:

http://blog.terrasky.com/blog/create-a-render-a-visualforce-page-as-pdf-button
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_additional_render_pdf.htm

Here is the VF for the one I just tested and works fine. Hope this helps, thanks!

www.incompany.cr/salesforce
  
<apex:page standardController="Factura__c" showHeader="false" renderAs="pdf" language="es-ES">
<apex:form >

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <apex:stylesheet value="{!$Resource.invoice}"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <apex:includeScript value="{!$Resource.JqueryTable}"/>
      <script type="text/javascript">
      
      // esto es para hacer a la tabla filtrable con las variables de cada columna :)
      $(document).ready(function() 
          { 
              $("#table").tablesorter({ 
          widgets: ['zebra'] 
          }); 
          } 
      ); 
      </script>
      
    <title>Factura por Servicios Incompany</title>

</head>

<body>

<div id="page">
    
    <!--   Para cambiar el estatus de la factura ( la cinta de color que sale en la esquina superior izquierda), 
    solo hay que actualizar la clase. por ejemplo "status paid" o "status overdue". Las opciones disponibles son: draft, sent, paid, overdue   -->
    
    <div class="status sent">
        <p>Paid</p>
    </div>
    
    <!-- Aqui datos del cliente --> 
    <p class="recipient-address">
    <strong>Nombre: {!Factura__c.facturaNombreDe__c} </strong><br />
    ID Proyecto:  {!Factura__c.Proyecto__r.CodigoProyecto__c}<br />
    Nombre de Encargado:  {!Factura__c.Encargado_de_Pago__c} <br />
    <!-- Saldo en Proyecto: ${!Factura__c.SaldoProyecto__c} <br />-->
    <!--  Enviado a:  {!Factura__c.Proyecto__r.Cliente__r.FacturaNombre__c} <br />-->
    </p>
    
    <!-- Aqui Datos de la factura -->
    <h1>Factura #{!Factura__c.name}</h1>
    <p class="terms"><strong>Fecha de Emisión: <apex:outputText value="{0,date,dd'/'MM'/'yyyy}"><apex:param value="{!Factura__c.FechaEmision__c}"/></apex:outputText>  </strong><br/>

 <strong>Fecha de Vencimiento: <apex:outputText value="{0,date,dd'/'MM'/'yyyy}"><apex:param value="{!Factura__c.fechaVencimiento__c}"/></apex:outputText>  </strong>
   </p>
  
     
    
    <!-- Aqui va el logo -->
    <img src="{!$Resource.companylogo2}" alt="Incompany logo" class="company-logo" />
    
    <!-- Aqui va direccion -->
    <p class="company-address">
        <strong>Incompany Solutions S.A</strong><br/>
         <strong>Cedula Jurídica:</strong> 3-101-596614-17<br/>
         <strong>Teléfono:</strong> +506-2271-2803 <br/>
         <strong>Email:</strong> cobros@incompany.cr<br/>
         <strong>Dirección:</strong>Centro Colonial Escazú, Oficentro Faro. San José.<br/>
    </p>
    
    <!-- Aqui las variables de la tabla -->
    <table id="table" class="tablesorter" cellspacing="0" style="margin-top:70px;"> 
    <thead> 
    <tr> 
        <th>Descripción</th> 
        <th>Precio $</th> 
    </tr> 
    </thead> 
    <tbody> 
    <!-- Aqui Valores de el Servicio #1 -->
    <tr> 
        <td>{!Factura__c.Detalle__c}</td> 
        <td>${!Factura__c.Monto__c}</td> 
    </tr> 
    <!-- Aqui Valores de el Servicio #2 
    <tr> 
        <td>Desarrollo de pagina web a la medida </td> 
        <td>$2500</td> 
    </tr>
    <!-- Aqui Valores de el Servicio #3 
    <tr> 
        <td>Servicios profesionales de diseño grafico </td> 
        <td>$1000</td> 
    </tr> 
    <!-- Aqui Valores de el Servicio #4 
    <tr> 
        <td>Asesoria de tendencia y diseño centrado en el usuario UX </td> 
        <td>$2500</td> 
    </tr> -->
    </tbody> 
    </table> 
    
    <!-- total que se debe -->
    <div class="total-due">
        <div class="total-heading"><p>Monto Total</p></div>
        <div class="total-amount"><p>${!Factura__c.Monto__c}</p></div>
    </div>
  
    <hr />
    
    <!-- botones para paypal o una generico para tarjeta de credito -->
    
    <div class="pay-buttons">
        <p>Autorizada mediante la Resolución 11-97 del 12 de Agosto de 1997 de la Dirección General de Tributación</p>
        <!--<a href="#" class="pay-paypal">Pay now with PayPal</a>
        <a href="#" class="pay-card">Pay with Credit Card</a>-->
    </div>
    <div><p>A continuación un detalle de la cuenta de banco a utilizar para transferencias o depósitos:
<p></p>

<p></p>
</p></div>
    
</div>

<!-- Decoracion del footer de la factura -->
<div class="page-shadow"></div>






</body>

</apex:form>
</apex:page>



 
ManzaManza
Hi

Thank you for your reply. I finally find out what is the issue, it seems when rendering into pdf it doesnt like big css files. On bootstrap i went to customize and took out most of the components, reducing the css file to 1000 lines and the pdf render as expected (the original css is around 8000 lines), then i increased to 1200 lines aprox, and the css broke and pdf just didnt render dislaying some visualforce errors.

This didnt make any difference in using minimize or non minimize versions.

maybe this is way in some other blogs they recommended to put inline css in the page, becuase inline will usually not be a long set of lines (I guess)