DesiLogi Posted December 11, 2023 Report Share Posted December 11, 2023 Hi, For the life of me I can't get this to work. I've tried 20 different solutions from S.O., had ChatGTP4 modify the code, etc. Hopefully, someone on this forum will have run into this and made it work... I have a simple html page that host 2 datapages, one for content and the other for the footer. The content datapage is a tabular report and the number of records varies from 1 to more than a 100, so the length on a page is dynamic and can run into multiple pages on print, and anywhere in the page: top, somewhere in the middle, bottom. The footer datapage is a details datapage with simple user name/address info that's usually 1-3 lines of text. I don't believe the datapages are the problem here as I've tried removing them and just putting text for content--with the same result. If I stick/anchor the footer to the bottom of the last page, for printing, I keep getting an extra blank page in print preview. Altering the CSS to remove the extra blank page "un-fixes" the footer from the bottom of the last page. I need both, in print preview: the footer to stick to the bottom of the last page only, and there to be no extra blank page after the footer. Does anyone have a solution to this? Here's the code I'm using that does stick the header at the bottom of the last page but has an empty blank page after it: <html> <style type="text/css" media="print"> @media print { body { position: relative; } .footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; } .content { margin-bottom: 60px; /* This ensures there is space for the footer */ } .page-break { display: block; page-break-before: always; } } </style> <body> <div class="content"> <script type="text/javascript" src="https://c0afw773.caspio.com/dp/c21040009f7f41d6de1a40ebaf0b/emb"></script> <div class="page-break"></div> <!-- This forces a page break --> </div> <div class="footer" id="footer" style="height:50px; width:100%"> <script type="text/javascript" src="https://c0afw773.caspio.com/scripts/embed.js"></script><script type="text/javascript">try{f_cbload(true, "c0afw773.caspio.com", "c2104000b2ca60c9339141d0a10d");}catch(v_e){;}</script> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Volomeister Posted December 18, 2023 Report Share Posted December 18, 2023 Hi @DesiLogi Can you attach an exported copy of both DataPages with a dependent table so I can check its setup? Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted December 18, 2023 Author Report Share Posted December 18, 2023 Hi @Volomeister, Thanks for offering to take a look-- I can't export the datapages and dependancies because there's a number of tables and private data I'd need to filter out. But that's ok because it's not related to the datapages. If you use example text instead of datapages it'll do the same thing. The code below, when pasted into a regular html page will reproduce the issue upon print preview. <html> <style type="text/css" media="print"> @media print { body { position: relative; } .footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; } .content { margin-bottom: 60px; /* This ensures there is space for the footer */ } .page-break { display: block; page-break-before: always; } } </style> <body> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis odio vel felis eleifend, sit amet finibus augue suscipit. Sed consequat nunc vel pellentesque sodales. Duis et nibh nec enim condimentum molestie. Maecenas luctus dictum enim, vel interdum arcu fermentum sit amet. Pellentesque porttitor commodo viverra. Sed tristique dolor sed tristique volutpat. Proin vitae pulvinar nunc. <br /><br /> Donec felis dolor, venenatis ac sollicitudin sed, pulvinar congue dolor. Proin nulla massa, elementum ut rhoncus id, posuere non risus. Proin eu velit in nisi ultrices dictum vel a massa. Vestibulum eget sem at elit maximus lacinia eu in tortor. Suspendisse ullamcorper felis ut felis consequat venenatis. Donec in aliquam tellus, vel euismod lectus. Fusce tincidunt vestibulum nibh a maximus. Nullam maximus sodales ante, ac fringilla ipsum cursus porta. Nunc sed mi mi. Aliquam ultricies aliquet ex, sed ultrices diam placerat eget. <br /><br /> Cras pellentesque dolor et felis blandit iaculis. Nulla blandit in nunc vitae mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nulla nec sapien porttitor porta lobortis eu purus. Ut mattis neque porttitor turpis euismod, ut ullamcorper metus ornare. Suspendisse potenti. Pellentesque eu elit in erat hendrerit egestas. Fusce commodo tempus massa, a elementum eros porta et. Duis at laoreet risus, sit amet semper urna. Integer faucibus mauris ut euismod blandit. <br /><br /> Vestibulum suscipit sodales arcu, in accumsan risus rhoncus sed. Nam porttitor lacus vitae purus lacinia, quis bibendum ante tempus. Vivamus eu mauris ut leo gravida ornare. Cras eu ligula cursus, aliquet enim eu, gravida quam. Proin scelerisque eu augue ac hendrerit. In sit amet erat et nunc vehicula bibendum non id mauris. Sed vel tristique diam, vitae feugiat eros. Vestibulum laoreet lorem est, at porttitor turpis scelerisque at. <br /><br /> Nulla ante elit, maximus eu nisl non, malesuada suscipit mauris. Curabitur tristique vel eros vel tincidunt. Proin interdum placerat metus, vitae tempor tellus tempor pulvinar. Aliquam luctus nunc nisi, non auctor lectus aliquet ac. Cras non metus in urna semper molestie eget eget mauris. Morbi mollis ac urna viverra consectetur. Vivamus cursus tellus id leo fringilla, non aliquet leo sagittis. Vivamus malesuada euismod convallis. Quisque vehicula, ante sed consectetur aliquet, lacus enim cursus neque, in feugiat mi urna a justo. Nam molestie est sit amet augue sagittis, nec hendrerit leo fringilla. Phasellus id cursus nisi. Maecenas vehicula non erat sit amet varius. Nulla et mauris vulputate, tempus purus eu, rutrum orci. Nulla egestas orci mauris, sed tincidunt sem blandit eget. Cras sed magna nec est scelerisque ullamcorper eu eget odio. <br /><br /> Aliquam ornare, tellus id porta tempus, enim massa rutrum enim, ut venenatis nibh lectus in nunc. Praesent ut lacus ultricies, laoreet quam a, posuere justo. Sed nisl odio, consequat at tincidunt a, efficitur eget quam. Nam commodo ex sed finibus iaculis. Ut luctus, nisl eu malesuada euismod, massa metus vulputate nunc, convallis finibus purus sapien non magna. Nunc blandit, sem vel ultrices tristique, lectus tellus facilisis turpis, scelerisque auctor turpis enim eu lorem. Sed nec est consectetur, ultrices felis vitae, tempus erat. Morbi ante elit, vehicula et tortor non, vestibulum pharetra libero. Integer a ex quis neque viverra vestibulum. Donec rhoncus odio vitae sapien rutrum, quis maximus leo feugiat. Vivamus risus justo, ultrices vitae quam ac, gravida auctor dui. Nullam at ultricies massa. Vivamus eu tellus luctus, suscipit quam non, eleifend nisl. <br /><br /> Vivamus placerat ipsum in justo eleifend, non bibendum turpis auctor. Sed tristique augue ipsum, eu viverra libero scelerisque quis. Aliquam erat volutpat. Duis at est molestie, facilisis enim ac, ultricies enim. Integer et ipsum maximus, pellentesque nibh et, lacinia elit. Vivamus faucibus, justo et interdum scelerisque, erat nisi elementum felis, vitae interdum nisl dui non velit. Quisque facilisis quis dolor et feugiat. Praesent ultricies vestibulum lectus, at vehicula massa commodo pharetra. Sed laoreet enim sed urna bibendum sodales. Sed enim odio, placerat at felis et, ultrices ultricies libero. Curabitur scelerisque id mi at tincidunt. Nullam commodo justo aliquam diam consequat, sed finibus lorem porttitor. <br /><br /> Phasellus bibendum diam turpis, et egestas urna fringilla nec. Morbi porttitor erat vitae justo tincidunt, ac dignissim ligula aliquam. Mauris nisl lacus, placerat sit amet ex et, accumsan interdum tortor. Aenean justo ex, posuere non eleifend sed, blandit a mauris. Sed fermentum in quam eget consequat. Phasellus eget aliquam sapien. Vivamus ac ultricies mauris. Aenean eu pharetra sem, convallis vehicula sapien. Cras lobortis at est fermentum pretium. Etiam eget lacus eget elit tincidunt ultrices. Suspendisse ac nulla et urna consectetur volutpat eu a orci. Aenean ornare mauris a libero semper rhoncus. Ut eleifend mauris quis lorem efficitur sagittis. Proin volutpat lectus ipsum, quis molestie tellus aliquam sit amet. <br /><br /> Vivamus placerat ipsum in justo eleifend, non bibendum turpis auctor. Sed tristique augue ipsum, eu viverra libero scelerisque quis. Aliquam erat volutpat. Duis at est molestie, facilisis enim ac, ultricies enim. Integer et ipsum maximus, pellentesque nibh et, lacinia elit. Vivamus faucibus, justo et interdum scelerisque, erat nisi elementum felis, vitae interdum nisl dui non velit. Quisque facilisis quis dolor et feugiat. Praesent ultricies vestibulum lectus, at vehicula massa commodo pharetra. Sed laoreet enim sed urna bibendum sodales. Sed enim odio, placerat at felis et, ultrices ultricies libero. Curabitur scelerisque id mi at tincidunt. Nullam commodo justo aliquam diam consequat, sed finibus lorem porttitor. <br /><br /> Phasellus bibendum diam turpis, et egestas urna fringilla nec. Morbi porttitor erat vitae justo tincidunt, ac dignissim ligula aliquam. Mauris nisl lacus, placerat sit amet ex et, accumsan interdum tortor. Aenean justo ex, posuere non eleifend sed, blandit a mauris. Sed fermentum in quam eget consequat. Phasellus eget aliquam sapien. Vivamus ac ultricies mauris. Aenean eu pharetra sem, convallis vehicula sapien. Cras lobortis at est fermentum pretium. Etiam eget lacus eget elit tincidunt ultrices. Suspendisse ac nulla et urna consectetur volutpat eu a orci. Aenean ornare mauris a libero semper rhoncus. Ut eleifend mauris quis lorem efficitur sagittis. Proin volutpat lectus ipsum, quis molestie tellus aliquam sit amet. <br /><br /> Phasellus bibendum diam turpis, et egestas urna fringilla nec. Morbi porttitor erat vitae justo tincidunt, ac dignissim ligula aliquam. Mauris nisl lacus, placerat sit amet ex et, accumsan interdum tortor. Aenean justo ex, posuere non eleifend sed, blandit a mauris. Sed fermentum in quam eget consequat. Phasellus eget aliquam sapien. Vivamus ac ultricies mauris. Aenean eu pharetra sem, convallis vehicula sapien. Cras lobortis at est fermentum pretium. Etiam eget lacus eget elit tincidunt ultrices. Suspendisse ac nulla et urna consectetur volutpat eu a orci. Aenean ornare mauris a libero semper rhoncus. Ut eleifend mauris quis lorem efficitur sagittis. Proin volutpat lectus ipsum, quis molestie tellus aliquam sit amet. <div class="page-break"></div> <!-- This forces a page break --> </div> <div class="footer" id="footer" style="height:50px; width:100%;text-align:center"> footer name info<br />footer address info </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted January 5 Author Report Share Posted January 5 Hi @Volomeister, just wanted to bump this thread to see if you had a chance to take a look. I can't figure it out myself. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.