1

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:enter image description here

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

6
  • Did you try to use <apex:outputText> instead of <apex:OutputField> ?
    – SL man
    Oct 30, 2015 at 19:10
  • Yes I tried that one but then the all table was hidden. "<apex:outputText escape="false" Value="{!Quote.Hardware_configuration__c}" />" I also tried escape=false but it did not work :( Anyother ideas? Thanks yuo
    – rnasur
    Oct 31, 2015 at 15:22
  • Would you show us the rest of your code please? If you're using any CSS 3, that could be the cause of your problem. There's clearly more to your code than just the table as I see no formatting or CSS for it. The PDF render engine only supports CSS 2.1 which could be the source of your issue.
    – crmprogdev
    Nov 1, 2015 at 16:06
  • Hi @crmprogdev, I have updated the post with the rest of the code. Thanks in advance
    – rnasur
    Nov 1, 2015 at 18:49
  • 1
    Why are you using 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 for print, but you don't want this in your header if you want to view it on screen.
    – crmprogdev
    Nov 1, 2015 at 19:17

1 Answer 1

0
    <apex:page standardController="Quote" action="{!populatePriceOnQuote}" extensions="QuotePDFController" showHeader="false"  applyHtmlTag="false"  renderAs="pdf">


    <head>
    <style type="text/css" >

    @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:outputText escape="false" Value="{!Quote.Hardware_configuration__c}" /></td>
  </tr>

  </apex:variable>
</apex:repeat>
</table><br/>


</body>
</apex:page>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .