2

I have a VF page render as pdf like that (to simplify) :

<div class"mainContent" style="page-break-after:always;">
  <div>
     <table>a table with more or less lines (dynamic)</table>
  </div>
  <div class="footer" style="position:fixed; bottom: 0px;">my footer</div>
</div>
<div class="lastPage">the last page</div>

I put style="page-break-after:always;" on the first div (mainContent) so the last page is always on a new page (it works).

The footer is fixed at the bottom of the pages, but it is also displayed onthe last page, and I don't want it to be displayed on the last page.

I want it to be displayed on the first page if the table is short enough. If the table contains a lot of lines that create a new page with the table divided on two pages for exmple, I'd like the footer to be displayed only on the second page (at the end of the table, but at the bottom of the page)

Is that possible ?

Blockquote

Improve this question

1 Answer 1

Reset to default
2

Ensuring the footer doesn't appear on the last page should be possible with @page and Named Pages in your CSS. Unfortunately there's no :last psuedo-selector for @page, otherwise that would get the job done.

First, add some CSS for your last page:

div.lastPage {
    page: lastPage; 
    /* This assigns the name, basically, if this class appears, then this is a "lastPage" page*/
}

Then add a @page rule:

@page lastPage {
    .lastPage {
        display: none;
    }

    @bottom-center {
        content: ''; 
        /* displays nothing at the bottom of the page if you have a page rule for 
        this zone on other pages */
    }
}

Without seeing the CSS you have on the page you might need to do one or the other above.

Some helpful resources on page rules in CSS:

Improve this answer
7
  • I havn't more css than what I put in my example. I tried to add your css snippet to my VF page but there is no differences, the footer is still displayed on the last page
    – dou
    Commented May 11, 2020 at 14:02
  • It sounds like position:fixed; bottom: 0px; on your footer div is pulling it to the bottom of all content, making it always below the lastPage div.
    – nbrown
    Commented May 11, 2020 at 14:07
  • Yes I remove that part and the footer is no more on the last page, but it is no more in the bottom of the firt page too (the footer is displayed just after the content of the page, and not at the bottom)
    – dou
    Commented May 11, 2020 at 14:10
  • 2
    Check out this answer: stackoverflow.com/a/21043407/5174170 Part of the issue is that fixed is meant for an entire viewport (which doesn't really exist when printing) so it sounds like it's treating all pages as the viewport making it always go to the bottom of the last page. To get around that you will likely need to set the container div to position: relative and use position: absolute for the footer. Because you want the container to stretch the height of the pages. This does not sound very simple. See if you could use @page and @bottom-content to position instead?
    – nbrown
    Commented May 11, 2020 at 14:20
  • thank you the link provided the answer : I can now display the footer on the bottom of the first page. But If my table contains many rows, the last rows are displayed on top of the footer instead of going on another page. Do you know how I can force the table to continue to another page after for example 20 rows ?
    – dou
    Commented May 11, 2020 at 14:54

You must log in to answer this question.

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