Log in to AnswerLog in to Follow
Nannu
18Views
7Comments
Solved
[Simple Reports Reactive] How to print footer on every printed page of a document?
Question
Reactive
Forge
Simple Reports Reactive
Forge component by Rafael Fantato
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;
}
0
0
on 9th Feb
Nannu
Solution

Replying to Manish Gupta's comment on 16 Feb 2021 04:51:17

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.

See solution in context
0
0
on 17th Feb

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. 

0
0
on 10th Feb

Hi Manish,

It's only printing first page with no footer.

thanks

0
0
on 10th Feb

Replying to Nannu's comment on 10 Feb 2021 15:48:39

Hi Nannu

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

0
0
on 11th Feb

Replying to Manish Gupta's comment on 11 Feb 2021 04:51:12

Hi Manish please see attached OML for example, thanks.

Footer.oap

0
0
on 11th Feb

Replying to Nannu's comment on 11 Feb 2021 15:37:41

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.

0
0
on 16th Feb
Nannu
Solution

Replying to Manish Gupta's comment on 16 Feb 2021 04:51:17

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.

0
0
on 17th Feb

Replying to Nannu's comment on 17 Feb 2021 17:26:28

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 :) 

0
0
on 18th Feb
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.