2

I have a visualforce page renderAs="pdf" in which I'd like to put a footer :

<apex:page standardController="Opportunity" showHeader="false" sidebar="false" renderAs="pdf">
<head>
    <style type="text/css" media="all">
        @page {
            @bottom-center {
             content: element(footer);
            }
        }

        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }

    </style>
</head>
<body>
<!--some html here-->

<div class="footer">
    <div>footer</div>
</div>
</body>

But the css style is not applied : the footer stay just at the end of the other elements, not at the end of the document. In addition if I try to add some css to another element, for example :

.myClass{ color: red; }

this is not applied too.

How can I add css style into my pdf ?

1
  • 3
    Add applyBodyTag="false" to apex:page it worked for me with the same code.
    – javanoob
    Jan 9 '17 at 17:07
2

You need to increase your specificity because you are conflicting with the standard stylesheets. Or the simpler solution is just to remove them.

<apex:page standardStylesheets="false" ...>
    <!-- markup -->
</apex:page>
4
  • I just tried to add this but that don't resolve my problem, the css is still not applied
    – dou
    Jan 9 '17 at 16:06
  • 2
    One way to debug this problem is remove visualforce render as pdf. treat it like a normal VF page . inspect using browser debugger tools fix the problem and then again put the render as pdf attribute.
    – RedDevil
    Jan 9 '17 at 16:09
  • So if I remove the renderAs="pdf" the style is applied ... is ther a way to add some style to a pdf ?
    – dou
    Jan 9 '17 at 16:13
  • 1
    Try adding these attributes to your page: renderAs="pdf" showHeader="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" Jan 9 '17 at 16:35
1

I know it's late but my answer might be useful for people that are currently facing this issue... Ok after finding that I already had set the attributes that other users have suggested in other posts:

<apex:page standardController="YourController" showHeader="false" applyHtmlTag="false" renderAs="pdf">

I realized that not all the css rules were being ignored, some were actualy applied in the PDF, the rules being ignored were defined in the visualforce page itself while the ones that were woking fine were imported with the apex style sheet component:

<apex:stylesheet value="{!$Resource.your_css_file}"/>

So I moved all the rules that were defined in the VF page to that CSS file (static resource) and that did the trick. You might wanna try to do the same and move your CSS rules to a file, upload it as a static resource and imported like I did, it worked for me just fine.

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.