Apex Code Development You need to sign in to do that
Don't have an account?
Jan Drommershausen CSS: line-height don't apply in PDF
Hello,
i am experiencing Problems again, as line-height don't work in my Visualforce Page which is rendered as PDF.
Do some of you had this Problem also? And how did you solve it?I tried with static resources CSS also but with no success :(
Here is my Page:
<apex:page standardController="Quote" renderas="pdf" showHeader="false" extensions="ExtensionControllerQuote">
<head>
<style>
@page {
font-family : Verdana,Sans-serif;
font-size : 9px;
margin-top : 1.9cm;
margin-bottom : 1.6cm;
margin-left : 2.2cm;
margin-right : 0.7cm;
}
.OrgAdress {
font-family : Verdana,Sans-serif;
font-size : 5pt;
}
.OrgInfo {
font-family : Verdana,Sans-serif;
font-size : 7pt;
line-height : 10%;
}
.AccAdress {
font-family : Verdana,Sans-serif;
font-size : 10pt;
}
.Text {
font-family : Verdana,Sans-serif;
font-size : 9pt;
}
.Headlines {
font-family : Verdana,Sans-serif;
font-size : 9pt;
line-height : 9pt;
font-weight : bold;
}
</style>
</head>
<div style="page-break-after:always;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="Anschreiben">
<tr>
<td ALIGN="left" VALIGN="top">
<img src='{!URLFOR($Resource.Logo_quote)}' width="3.0cm" height="0.59cm" title="logo" />
<br/><br/><br/><br/><br/><br/>
<apex:outputPanel styleClass="OrgAdress" style="white-space:pre;">
{!$Organization.Name} {!$Organization.Street} {!$Organization.PostalCode} {!$Organization.City} {!$Organization.Country}
<br/>
</apex:outputPanel>
<apex:outputPanel styleClass="AccAdress">
{!Quote.Opportunity.Account.Name} <br/>
{!Quote.Opportunity.Account.BillingStreet} <br/>
{!Quote.Opportunity.Account.BillingPostalCode} {!Quote.Opportunity.Account.BillingCity}<br/>
{!Quote.Opportunity.Account.BillingCountry} <br/>
</apex:outputPanel>
</td>
<td ALIGN="left" VALIGN="top" height="300px" width="200px">
<apex:outputPanel styleClass="OrgInfo">
{!$Organization.Name}<br/>
<br/>
{!$Organization.Street}<br/>
{!$Organization.PostalCode} {!$Organization.City}<br/>
{!$Organization.Country}<br/>
<br/>
Phone {!$Organization.Phone}<br/>
Fax {!$Organization.Fax}<br/>
<br/>
<br/>"
</apex:outputPanel>
</td>
</tr>
<tr>
<td ALIGN="left" VALIGN="top">
<apex:outputPanel styleClass="Headlines">
<apex:OutputField value="{!Quote.Subject__c}"/>
</apex:outputPanel>
<apex:outputPanel styleClass="Text">
<br/><br/>
<apex:OutputField value="{!Quote.Covering_Letter_Text__c}"/>
</apex:outputPanel></td>
<td ALIGN="left" VALIGN="top"></td>
</tr>
<tr>
<td ALIGN="left" VALIGN="top"></td>
<td ALIGN="left" VALIGN="top"></td>
</tr>
</table>
</div>
<div style="page-break-after:always;">
<apex:outputPanel styleClass="Text">
<img src='{!URLFOR($Resource.Logo_quote)}' width="3.0cm" height="0.59cm" title="logo" /><br/><br/>
<p><strong>Angebot</strong></p>
<br/>
<table border="0" cellspacing="0" cellpadding="0" width="585px" id="tableproductsheadline">
<tr>
<td ALIGN="left" VALIGN="top" width="35px"><strong>Pos.</strong></td>
<td ALIGN="right" VALIGN="top" width="30px"><strong>Anz.</strong></td>
<td ALIGN="right" VALIGN="top" width="10px"></td>
<td ALIGN="left" VALIGN="top" width="50px"><strong>Einheit</strong></td>
<td ALIGN="left" VALIGN="top" width="280px"><strong>Beschreibung</strong></td>
<td ALIGN="right" VALIGN="top" width="90px"><strong>Einzelpreis</strong></td>
<td ALIGN="right" VALIGN="top" width="90px"><strong>Gesamtpreis</strong></td>
</tr>
</table>
<apex:variable value="{!1}" var="rowNum"/>
<apex:repeat value="{!QuoteLineItemsSorted}" var="line">
<apex:outputtext rendered="{!IF(line.New_Section_Headline__c='','false','true')}">
<br/>
<strong>{!line.New_Section_Headline__c}</strong>
</apex:outputText>
<table border="0" cellspacing="0" cellpadding="0" width="585px" id="tableproducts">
<tr>
<td ALIGN="left" VALIGN="top" width="35px"> <p><strong><apex:outputText value="{!FLOOR(rowNum)}"/><apex:variable var="rowNum" value="{!rowNum + 1}"/></strong></p></td>
<td ALIGN="right" VALIGN="top" width="30px"><p>{!line.Quantity}</p></td>
<td ALIGN="right" VALIGN="top" width="10px"></td>
<td ALIGN="left" VALIGN="top" width="50px"> <p>{!line.Einheit__c}</p></td>
<td ALIGN="left" VALIGN="top" width="280px"> <p><strong>{!line.PricebookEntry.Name}</strong><br/><br/>
{!line.Product_lineitem_description__c}</p></td>
<td ALIGN="right" VALIGN="top" width="90px"><p><apex:OutputField value="{!line.UnitPrice}"/></p></td>
<td ALIGN="right" VALIGN="top" width="90px"><p><apex:OutputField value="{!line.TotalPrice}"/></p></td>
</tr>
</table>
</apex:repeat>
</apex:outputPanel>
</div>
</apex:page>
I've found that when rendering as PDF, some elements (tables in particular) don't pick up style classes. Inline styling worked for me - try that and see if it helps.
All Answers
I've found that when rendering as PDF, some elements (tables in particular) don't pick up style classes. Inline styling worked for me - try that and see if it helps.
Hey Bob, the inline styling did the job here. It works on <p> elements even in tables for me. Thank you very much.