2

I have a Visualforce page that renders as a PDF. It displays a table of data and an image on the header on each page:

<apex:page renderAs="pdf">
  <head>
  <style type="text/css" media="print">
    @page {
      @top-center {
        content: element(header);
      }
    }

    div.header {
      position: running(header);
    }

    .sectionTitle {
      font-weight: bold;
    }
  </style>
  </head>

  <div class="header">
    <img src="{!$Resource.logo}" width="25%"/>
  </div>

  <div class="content">
    <table>
      <tr>
        <td class="sectionTitle">test</td>
      </tr>
    </table>
  </div>
</apex:page>

My issue is that I want to apply CSS classes to my table elements; however the CSS is not applied (in this example the text should be bold but it doesn't). If I set the applyBodyTag or applyHtmlTag of apex:page to false, it does take effect the CSS classes for the table but the header breaks.

Any ideas?

  • When you say "the header breaks" what exactly do you mean? – Phil Hawthorn Jan 22 '15 at 8:08
  • @PhilHawthorn to explain that better please see the following gif: cl.ly/ZQAQ As you can see the header get's misplaced. Also the text overlaps the header. – jonathanwiesel Jan 22 '15 at 12:27
  • 1
    Ok, got you. So, I don't think the header is broken as such - its just that by adding the applyBodyTag="false" you are getting it to recognise the CSS (whereas without it, it isn't), its that that is moving your logo right to the top (i'm a bit puzzled by why it appears to the left though). I've updated my answer to include the VF, note the addition of the margin-top styling. – Phil Hawthorn Jan 22 '15 at 13:24
4

Change your <apex:page> to this:

<apex:page renderAs="pdf" applyBodyTag="false">

According to the docs:

A Boolean value that specifies whether or not Visualforce should automatically add a <body> tag to the generated HTML output. Set to false to disable adding the <body> tag to the response, for example, when the tag is statically set in your markup. If not specified, this value defaults to the value of the applyHtmlTag attribute if it's set, or true, if applyHtmlTag isn't set.

Using the sample you provided, I was able to render the following as PDF:

enter image description here

The header (logo) appears on every page as expected using the following VF:

<apex:page renderAs="PDF" applyBodyTag="false">
  <head>
  <style type="text/css" media="print">
    @page {
      margin-top: 1.5in;
      @top-center {
        content: element(header);
      }
    }
    div.header {
      position: running(header);
    }
    .sectionTitle {
      font-weight: bold;
    }
  </style>
  </head>
  <div class="header">
    <center><img src="{!$Resource.logo}" width="25%"/></center>
  </div>
  <div class="content">
    <table>
      <tr>
        <td class="sectionTitle">test</td>
      </tr>
      <!--rest removed for brevity...-->
    </table>
  </div>
</apex:page>
  • As I mentioned, I tried that and indeed the CSS takes effect, but then the header breaks functionality – jonathanwiesel Jan 21 '15 at 22:44
  • Sorry, I didn't read properly - let me take another look, i've done a lot of this type of thing – Phil Hawthorn Jan 22 '15 at 7:51
  • @jonathanwiesel Were you able to resolve this? I header is set properly on the first PDF page but on the next pages, the header and contents are getting overlapped. Any way to solve this? – RajeshShah Feb 3 '15 at 15:40
  • @RajeshShah yes, the trick was involved using the margin-top property – jonathanwiesel Feb 3 '15 at 19:16
2

try adding the attribute standardStylesheets="false" or showHeader="false" and build your own header.

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.