3

I have custom RTF field in a custom object which would have long formatted text. The text is cropped to certain width in the generated PDF.

I noticed that width of the table in rich text is set to some px automatically. I tried to overide using the following style, but no use:

.sfdc_richtext table{
   width: 100%;
 }

The Visualforce Page:

 <apex:page standardController="Territory_Target_Sheet__c" renderAs="pdf">
    <style type="text/css">
        @page {            
            @top-right {
                content: "Page " counter(page) " of " counter(pages);
            }
            margin:2em 1em 6em;     
        }              
        body{font-family: Arial Unicode MS;}
         .sfdc_richtext table{
              width: 100%; !important; 
               overflow: auto;
             position: absolute
         }
    </style>
    <apex:messages />

   <apex:outputField value="{!Territory__c.Special_notes__c}" />

</apex:page>

could you please help me on this?

2
  • Without seeing your entire code, it's difficult to fully diagnose your issue and give you a complete solution. All you've given us appears to be the CSS for that part of your table. Seeing the code for the entire page, might reveal much more. The fact that you've specified a RTF field could be part of the issue if it has particular formatting that your html block can't support, in which case, you might need to reduce the font size by an em or something along those lines.
    – crmprogdev
    May 18, 2015 at 14:27
  • I have updated my question with VF page which I am using. Since I faced issue, I am trying with simple Page.
    – goodForce
    May 19, 2015 at 4:42

2 Answers 2

1

You should try width: 100% !important.

1
  • I tried this too, but no luck.
    – goodForce
    May 18, 2015 at 9:01
1

Its a bit difficult to help you when you've not included the complete code for your page as asked, but instead only the CSS, but I'll try to give you some assistance to point you in the right direction.

They style you've specified for your table and body text is as follows:

 body{font-family: Arial Unicode MS;}
 .sfdc_richtext table{
      width: 100%; !important; 
       overflow: auto;
     position: absolute
 }

I don't know if the RTF you're bringing in is also in Arial or not. If it's not, it would have been helpful to know if your body font specified is overriding that. You've also not specified a font size for the body. I suggest that you do so.

For your table, I would suggest adding the following:

font-size: 80%

You can go lower as needed if the above shows the size is getting smaller. To get it to work properly, you may need to specify a font-size: 12px (or 10px), etc in your body{} CSS declaration as below:

body{font-family: Arial Unicode MS; font-size: 12px}

Be aware that SF's PDF render engine only supports CSS 2.1 features and requires very simple page layouts, that's part of why I wanted to see your complete VF page. Also, the use of ems, unless in an @media block, are known to sometimes be problematic for the PDF render engine. You may want to be aware of that in terms of your margins. Two references are provided below that might be of interest regarding em, ex and font-size under CSS 2.1.

http://www.w3.org/TR/CSS2/syndata.html#em-width

http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size

If the above suggestions do not work for you, please post the rest of your page code.

Edit:

Now that I've seen your page code, for starters, <apex:outputField> and <apex:messages /> are both on the list of Components That Are Unsafe to Use in a PDF. See Best Practices for Rendering PDFs. While somewhat irrelevant at the point, you've also not applied the CSS styleClass="sfdc_richtext" to the output field you were using.

I suggest you try doing something more like the following with your page:

<apex:page standardController="Territory_Target_Sheet__c" renderAs="pdf">
   <html>
   <head>
   <style type="text/css">
    @page {            
        @top-right {
            content: "Page " counter(page) " of " counter(pages);
        }
        margin:2em 1em 6em;     
    }              
    body{font-family: Arial Unicode MS;}
     .sfdc_richtext table{
          width: 100%; !important; 
           overflow: auto;
         position: absolute
     }
   </style>
   </head>
   <body>

      <table styleclass="sfdc_richtext">
      <tr>
      <td>{!Territory__c.Special_notes__c}</td>
      // You may need to do <td><apex:outputText value="{!Territory__c.Special_notes__c}"/><td>
      // Also see VF Dev Guide for more on Atrrib escape="true" option to disable HTML pass-thru
      </tr>
      </table>

   </body> 
   </html>
</apex:page>
4
  • Thanks for your reply. I have already added full code and it seems it was not visible as i marked code section incorrectly. I have very simple VF page. The content rendering using RTF field is cropping as its width is huge and it display properly if render this page as normal VF page, but not in PDF. The RTF field has formatted text which is copied from excel.
    – goodForce
    May 26, 2015 at 3:37
  • See my revised answer.
    – crmprogdev
    May 26, 2015 at 16:16
  • I have tried as you suggested and used <apex:outputText value="{!Territory__c.Special_notes__c}" escape="false"/>. but still the text is cropping.
    – goodForce
    May 28, 2015 at 2:48
  • In your CSS, I suggest you change overflow to visible. Does the page render properly in a browser without the renderAs=PDF? To fix this, you might also need to set your margins in percent values along with trying to scale the font size by adding font-size: 80%. I think you can also remove position:absolute from your CSS as it serves no purpose. Finally, you may need to add an @media statement to your CSS for print media that specifies a font size in points.
    – crmprogdev
    May 28, 2015 at 14:08

You must log in to answer this question.

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