I am quite new in visualforce. I am generating a PDF from a visualforce page but the issue is that when I try to insert a rich text field(called Quote.Hardware_configuration__c) in a table and then I see a double box for that field like in the screenshot below:
CoulD you help me to fix this? Also I tried with outputtext but I could not achive my goal.
<apex:page standardController="Quote" action="{!populatePriceOnQuote}" extensions="QuotePDFController" showHeader="false" applyHtmlTag="false" renderAs="pdf">
<head>
<style type="text/css" media="print">
@page {
size: letter portrait;
<!--margin: 10%;-->
margin-left: 2cm;
margin-right: 2cm;
margin-top: 4cm;
margin-bottom: 2cm;
font-family: 'SansSerif';
@top-left {
content: element(header_left);
}
@top-center {
content: element(header_center);
}
@top-right {
content: element(header_right);
}
@bottom-left {
content: element(footer_left);
}
@bottom-center {
content: element(footer_center);
}
@bottom-right {
content: counter(page) " (" counter(pages) ")";
}
}
.header_left {
position: running(header_left);
margin-bottom:10px;
color: #A0A0A0;
font-size: 10pt;
font-family: 'SansSerif';
}
.header_center{
position: running(header_center);
font-family: 'SansSerif';
}
.header_right {
text-align: right;
position: running(header_right);
font-family: 'SansSerif';
}
.rayHeader1 {
font-size: 13pt;
color: #365F91;
font-weight: bold;
font-family: 'SansSerif';
}
.rayHeader2 {
font-size: 10pt;
color: #365F91;
font-weight: bold;
font-family: 'SansSerif';
}
.rayBody {
font-size: 10pt;
page-break-after: always;
font-family: 'SansSerif';
}
.rayBody2 {
font-size: 10pt;
font-family: 'SansSerif';
}
#quotePricing {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#quotePricing td, #quotePricing th {
font-size: 1em;
border: 1px solid #4F81BD;
p
ing: 3px 7px 2px 7px;
}
#quotePricing th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #4F81BD;
color: #ffffff;
}
#quotePricing tr.alt td {
color: #000000;
background-color: #DBE5F1;
}
.footer_left {
text-align: left;
position: running(footer_left);
}
.footer_center {
text-align: center;
position: running(footer_center);
}
.footer_right {
text-align: right;
font-family: 'SansSerif';
position: running(footer_right);
}
.pageNumber:before {
content: counter(page);
}
.pageCount:before {
content: counter(pages);
}
.rayTD1 {
color: #005380;
font-weight: bold;
padding: 2px;
}
.rayTerms {
color: #365F91;
font-weight: bold;
}
.rayTable {
width: 100%;
border-collapse: collapse;
}
.rayTable td {
font-size: 1em;
border: 0.5px solid #4F81BD;
padding: 3px 7px 2px 7px;
}
</style>
</head>
<body>
<!-- start header -->
<div class="header_left"> {!Quote.Opportunity.Account.Name} {!YEAR(TODAY())}-{!MONTH(TODAY())}-{!DAY(TODAY())}<br></br><br></br>Quote number: {!Quote.QuoteNumber} {!DAY(TODAY())}-{!MONTH(TODAY())}-{!YEAR(TODAY())}</div>
<div class="header_right"><img src="{!$Resource.Logo}"></img></div>
<!-- End header -->
<br/>
<br/>
<div class="rayHeader2">HARDWARE</div>
<br/>
<table id="quotePricing">
<thead>
<th width="12%">Quantity</th>
<th>Product</th>
<th width="20%">Comment</th>
</thead>
<apex:repeat value="{!lineItems}" var="line">
<apex:variable var="v" value="" rendered="{!line.Product2.Product_Type__c ='Hardware'}">
<tr class="alt">
<td width="12%"><apex:outputText value="{0, number, ###,###,##0}" rendered="{!line.Product2.Product_Type__c ='Hardware'}"><apex:param value="{!line.Quantity}" /></apex:outputText></td>
<td><apex:OutputField value="{!line.Prod_Name__c}" rendered="{!line.Product2.Product_Type__c ='Hardware'}"></apex:OutputField></td>
<td width="20%"><apex:OutputField value="{!Quote.Hardware_Configuration__c}" rendered="{!line.Product2.Product_Type__c ='Hardware'}"></apex:OutputField></td>
</tr>
</apex:variable>
</apex:repeat>
</table><br/>
</body>
</apex:page>
Thanks in advance
applyHtmlTag="false"? I've not seen that one before & don't know why you'd need it. Also, this should not be in your header:<style type="text/css" media="print">. You can add an @media statement to your CSS forprint, but you don't want this in your header if you want to view it on screen.