I have a controller which calls a couple of function. The variables are then send to the apex page, which is mostly a html page. When I am redirecting to the visual force page, the report I want to create is perfectly fine , but when at the begining of my apex page I put render as pdf, then the css is not displayed correctly.

The image one is the visual page working perfectly, the image 2 is the render as pdf

I used bootstrap to create my visual page (I tried to upload bootstrap.css locally, I tried using the link to the official page, and I also tried to incorporate the boostrap.css between style tag on the page directly).

I would like to know if it was possible :

1- to fix the bad render when the visual page is rendered as a pdf

or 2- to download the visual page differently in order to add it to an email ( I tried to create an html template for that, but it is not practical at all as the controller and the page is quite complex)

How could the css be not working when transforming the html to a pdf ? Or at least be not compatible like that.

I can post the full code if anyone could help it would be very nice

enter image description here

enter image description here

2 Answers 2


The issue you mentioned quite common when your working with Visualforce pdf. I have came across the issue most the time during my development cycle.

Still i don't find out any solution which will convert directly support your html to pdf without any extra work around.

Below are the few thing i would like to you utilize in Visualforce PDF format, That make you achieve some what reach the style of html.

Use @page tag resize the page margin and padding

@page {
      margin: 0.3cm 0.2cm;
      size: A4;
      padding: 10px;

Here is the important guideline reg. rendering VF pages as PDF:

If you use inline CSS styles, you must set the API version to 28.0 or greater, set < apex:page applyBodyTag="false" >, and add static, valid < head > and < body > tags to your page.

I have noticed Style Tag float will give you more trouble in pdf, try to replace float with inline tags

Also Please go though below link for Limitation when rendered as pdf : pages_output_pdf_considerations.

  • Thank you for your answer but still my pdf is ugly as hell. I have API 46.0. It is a shame that salesforce team is not fixing that then. Do you think If I build my css exactly to have a nice visual on the pdf and not on the page it can work ? When you mention extra work around, what do you suggest ? I really need a pdf at then end or I would have lost a month worth of work.
    – Tiburce
    Jul 10, 2019 at 6:26
  • @Tiburce Yes you need create separate VF page for render as PDF. Normal Visual force page support all html tag but when you convert into pdf it losses it's style, Reason behind PDF Doesn't support those tag which you have used in the visual force. Still i didn't find out any easy way to turn Visualforce page to PDF
    Jul 11, 2019 at 8:41
  • Ok, thank you for the answer but I don't think I get the difference between separate visual force pages and normal visual force page. You recommend creating another page without any html tags ? how to make a proper pdf then directly otherwise ?
    – Tiburce
    Jul 12, 2019 at 9:40

I'm a bit late here, but the margin WILL ONLY APPLY if you express it in inches (cm won't work). Here's a sample code:

<apex:page standardController="Account" extensions="PrintAccount" 
renderAs="pdf" showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false">
            @page {
                margin: 0.15in;
        <div id="main_container" class="main-container" style="padding:10px;border:8px solid #555555;height:100%"> SOME CONTENT HERE </div>

You must log in to answer this question.

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