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?

  • 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 '15 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. – gold May 19 '15 at 4:42
1

You should try width: 100% !important.

  • I tried this too, but no luck. – gold May 18 '15 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>
  • 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. – gold May 26 '15 at 3:37
  • See my revised answer. – crmprogdev May 26 '15 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. – gold May 28 '15 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 '15 at 14:08

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.