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?

Improve this question
3
  • When you say "the header breaks" what exactly do you mean?
    – Phil Hawthorn
    Jan 22, 2015 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, 2015 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, 2015 at 13:24

2 Answers 2

Reset to default
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>
Improve this answer
4
  • As I mentioned, I tried that and indeed the CSS takes effect, but then the header breaks functionality
    – jonathanwiesel
    Jan 21, 2015 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, 2015 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, 2015 at 15:40
  • @RajeshShah yes, the trick was involved using the margin-top property
    – jonathanwiesel
    Feb 3, 2015 at 19:16
2

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

Improve this answer
1

You must log in to answer this question.

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