CODEWITHSUNDEEP
htmlcsspdfheader
Salesforce Steps
Salesforce Steps

Reputation: 183

Remove Header from First Page of HTML Generated PDF - CSS

I have written following CSS to display Header and Footer on my each page of PDF

  1. I want to remove Header from my First Page of PDF

  2. Also I want to increase height of my Footer, so my entire footer text will fit into it.

<style>
    @page {
        @top-center {
        content: element(header,first-except);}
        @bottom-left {content: element(footer);}
    }
    div.header {
    padding: 10px;
    position: running(header);
    }
    div.footer {
        display: block;
        padding: 0px;
        position: running(footer);
        font-size:10px;
        size: 15.5in 10.2in;
    }
    .pagenumber:before { content: counter(page); }
    .pagecount:before { content: counter(pages);  }
</style>
.............
.............
<div align="left" class="header">
    <h3 id="heading"> Pension Scheme Account Opening Request (continued)</h3>
</div>

<div class="footer">    
    <div align="right">Page <span class="pagenumber"/> of <span class="pagecount"/></div>
    <div> MY FOOTER TEXT   </div>
</div>

Upvotes: 3

Views: 12455

Answers (2)

user7486071
user7486071

Reputation:

1.To remove Header from first page use following code on above the @page{}

@page:first {
  @top-left {
  content: normal;
  }

2.To increase the footer size if you want to bring the footer upwards just use

margin-bottom:10mm;

Sample code:

@page {
     margin-bottom: 35mm;  
      @bottom-center { 
        content: element(footer);
             }    }

Upvotes: 3

Juan Jimenez
Juan Jimenez

Reputation: 5842

To remove the header on the first page follow the instructions on this page https://www.sundoginteractive.com/blog/different-headers-and-footers-by-page-in-pdf-salesforce.

Basically you create an empty header like: <div class="header"><div></div></div>, another div with the page-break-before:always class: <div style="page-break-before:always"></div> in order to force a page break which tells the browser to look for a new DIV with the desired CSS class for this page, and finally the "real" header div with the content <div class="header"><div>My header content</div></div>

To increase the footer you can add margin to the page element, like:

@page {
        @top-center {
        content: element(header,first-except);}
        @bottom-left {content: element(footer);}
        margin-top: 200px;
}

Upvotes: 0

Related Questions