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

  • Did you try to use <apex:outputText> instead of <apex:OutputField> ? – SL man Oct 30 '15 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 '15 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 '15 at 16:06
  • Hi @crmprogdev, I have updated the post with the rest of the code. Thanks in advance – rnasur Nov 1 '15 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 '15 at 19:17
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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.