14
Views
7
Comments
Solved
[Simple Reports Reactive] How to print footer on every printed page of a document?
Forge component by Rafael Fantato
2
Published on 05 Feb 2021
Application Type
Reactive

Hi all,

How can I  print a footer on every printed page of a document and avoid overlapping with body content?

Currently, I am using the below CSS. Also, how can I print the page number in the footer section?

Thank you for your time.

footer {
    position: fixed;
    bottom:0px;
}

Rank: #1298
Solution

Hi Manish,

I found a better solution for this problem which should work in all browsers. You have to put your content in a table tag which will create empty “place-holders” that will prevent the content from overlapping the header/footer.  For more information please follow the below link.

Plunker - Ultimate printable HTML layout with repeating header & footer on every page (plnkr.co)

Thank you for your time.

Rank: #632

Hello Nannu

Please try using this to fix the Footer.

#footer {
         position: absolute; 
         bottom:-100;
         right:0;
        float: right;
    }

Also, if possible please share how its working right now. 

Rank: #1298

Hi Manish,

It's only printing first page with no footer.

thanks

Rank: #632

Hi Nannu

Do you mean the footer is working fine for the whole report but only on Page 1 - the footer is not appended?  

Rank: #1298

Hi Manish please see attached OML for example, thanks.

Footer.oap

Rank: #632

Thanks for sharing the Application File. I have checked and for me "Footer Information" is printing on all pages including 1st page. 

Just you need to control the margin of content area as sometimes it overlap the Footer Information. 

So, just control that with the Max Height and try this in chrome browser.

Rank: #1298
Solution

Hi Manish,

I found a better solution for this problem which should work in all browsers. You have to put your content in a table tag which will create empty “place-holders” that will prevent the content from overlapping the header/footer.  For more information please follow the below link.

Plunker - Ultimate printable HTML layout with repeating header & footer on every page (plnkr.co)

Thank you for your time.

Rank: #632

Hii Nannu

Thanks, I meant the same with solution. 

1. When you use Placeholders it makes proper spacing for the items / container. So, I suggested to control content height in the last comment. 

2. When the content is control, footer part started to display on all pages. We can do that with CSS as well but that is not a good option for Document View

3. Using Placeholder is also a best practice for this. 


Finally, you have done this! Great :)