I want to add footer in the end of the page after every page-break in the html.
here is the html code(here when the content of the container is overflow i want to add footer at that page as well as on the second page it creates after the page-break):
<html>
<head>
...
<style>
.container {
width: 695px;
height: 1022px;
display: flex;
flex-direction: column;
margin: 10px;
padding: 40px;
color: #495057;
letter-spacing: 1px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
text-align: center;
page-break-after: always;
}
</style>
</head>
<body>
<div class="container">
...
</div>
<div class="footer">
...
</div>
<body>
</html>
Output ( as we can see in the output it only gives the footer in the first page but i want it in the second page as well):
You can use csi.js .
u will need to add the csi.min.js file in your <head>.
Make a footer.html
and add this to every page where u want that file to be included, in this case at last where u want your footer to be.
<body>
//Your page
<div data-include="footer.html"></div>
</body>
Edit:
I found this in their readme. try adding
"footer": {
"height": "28mm",
"contents": {
first: 'Cover page',
2: 'Second page', // Any page number is working. 1-based index
default: '<span style="color: #444;">{{page}}</span>/<span>{{pages}}</span>', // fallback value
last: 'Last Page'
}
},
to config
Related
I am generating PDF using ejs file in nodejs. Is it possible to add Footer on every page of the generated PDF?
Here is my ejs file:
<!DOCTYPE html>
<html>
...
<head>
<style>
footer{
background-color: red;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body> ... </body>
<footer>
<p>this is footer</p>
</footer>
</html>
here is my nodejs code snippet:
ejs.renderFile(path.join(__dirname, './views', "report-template.ejs"), { invoicedata: JSON.parse(results[0].jsondata), moment:moment }, (fileerr, data) => {
if (fileerr) {
console.log("Error!", fileerr);
} else {
let options = {
"height": "11.7in",
"width": "8.3in",
}
pdf.create(data, options).toFile("report.pdf", function (err, data) {
if (err) {
console.log("error!!");
} else {
console.log("file created successfully");
}
})
}
})
The output pdf getting is:
screenshot of pdf
Whilst it is fairly easy to emulate page breaks headers and footers in HTML they are not natural for a format that is designed for unfettered page widths or lengths.
It is common to describe HTML objects as % of a variable canvas the conversion to the fixed Cartesian pages needed by PDF is prone to rounding errors.
Here as an example, the primary aim was to emulate a PDF layout in Microsoft Edge (Chrome based) but the fiddle factors that work fairly well for view and print in one browser will need adjustments in another.
SEE the inset where the page for exactly the same code and target printer which is perfect in edge print preview, is subject to creep-age in Internet Explore, on the same printer defaults !! That crap-page thus often requires minor tweaking to keep it in sync, leading to two different copies of source !
<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Dynamic Styles: NewPage Breaking Headline News</title>
<!--
Generic break values
NewPage break values
Column break values
Region break values
Global values
-->
<style type="text/css" media="all">
.body {
position: absolute;
}
#page {
break-before: auto;
margin: 0px;
width: 736px;
height: 1103px;
position: relative;
}
h1 {
text-align: center;
}
#page-break {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
padding: 20px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
<div>
<br><h1>Headline on Page 1</h1>
...
more content on Page 1
...
</div>
<div id="page-break"> Footline on Page 1 </div>
</div>
<div id="page">
<br><h1>Headline on Page 2</h1>
...
more content on Page 2
...
<div id="page-break"> Footline on Page 2 </div>
</div>
<div id="page">
<br><br><h1>Headline on Page 3</h1>
...
more content on Page 3
...
<div id="page-break"> Footline on Page 3 </div>
</div>
</body></html>
Maybe this CSS can help? I.e. change "absolute" position to fixed?
#media print {
footer {
position: fixed;
bottom: 0;
}
}
There were some comments in this question that might be helpful:
How to use HTML to print header and footer on every printed page of a document?
In the screenshot that I hvae shared you can spot a form, at it is clearly visible that the form is shown with a scrollbar(i.e. the form has a lot of content to be displayed). What I,m trying to achieve is simply display the whole of the form on the parent webapage. I have shared the html as well as css of the main page visible , so that you can look and suggest the edits needed to be made in order to do so.
This page's code is
<!DOCTYPE html>
<html>
<head>
<title>Control Panel
</title>
<script src="http://localhost:1211/js/main.js">
</script>
<link rel="stylesheet" type="text/css" href="http://localhost:1211/css/main.css">
</head>
<body>
<header>
<?php echo "USERNAME"?>
<span>
<a id = "log" href="">Logout</a>
<span>
</header>
<hr>
<nav>
<button>Add Record</button><br><br>
<button>Update</button><br><br>
<button>Perform Query</button>
</nav>
<section id="workarea">
</section>
</body>
and its corresponding css is
header
{
padding-left: 30px;
display:inline;
}
hr
{
margin-top: 10px;
}
#log
{
float: right;
margin-right: 20px;
}
nav
{
float: left;
padding-top: 100px;
width: 20%;
height: 500px;
border-style: solid;
border-left-color: #FFFFFF;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-width: 2px;
}
section
{
float: right;
margin-top: 100px;
width: 78%;
height: 500px;
}
Please suggest me the changes I need to make in order to display the form in the whole 'nav' tag area. Your help is really appreciated
I finally figured it out , for some reason the new object that was being created inside 'nav' has some problem in it , made the following changes in my css
section > object
{
width : 70%;
height: 950px;
}
and it worked like a marvel :)
I have a situation where I am trying to display log data in XML format.
A template for the main page 'mainpage.html' defines the DIV and iframes.
A CSS file 'style2.css' defines the attributes of the page and data.
A file 'header.html' is sourced into one of the iframes. I'm only doing the last one because I don't want to have to build static headers every time the log file is parsed into table format.
And a fourth file, a sample log file, 'import.xml', is sourced into the other iframes. This file reads a log file in XML format and wraps data with <tr> and <td> tags.
Several problems are giving me grief.
My selectors for <TH> and <TD> tags are not taking effect
<TR> tags are not working in iframe
Vertical scrollbar is not hiding
Text is not centering
I don't have this problem if I put everything into one html file. It's only when I'm sourcing in external files.
I hope I'm being clear enough. The files that I'm providing are not meant to be production quality. Instead they are only proving out functionality. They are pretty basic and ugly.
Here are the file contents:
mainpage.html
<!DOCTYPE html>
<head><link rel="stylesheet" href="style2.css"></link></head>
<body>
<div id="container">
<div id="header">
<iframe id="hdr-frame" src="header.html"></iframe>
</div>
<div id="main">
<iframe id="main-frame" src="import.xml"></iframe>
</div>
</div>
</body>
</html>
header.html
<DOCTYPE! html>
<head>
<body>
<table id="header-table">
<th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th><th>Header 6</th>
</body>
</html>
style2.css
#container {
width:800px;
height:auto;
margin-left:auto;
margin-right: auto;
margin-top: 11px;
margin-bottom: 21px;
background-color: yellow;
}
#header {
height: 33px;
width:790px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
background-color: Red;
overflow: hidden;
}
#main {
width:99%;
height: auto;
margin-left: auto;
margin-right: auto;
background-color:Green;
color: white;
}
#import-table > tr > td {
width:30px;
color:red;
vertical-align: middle;
}
td {
width: 30px;
color: red;
text-align: center;
}
#hdr-frame {
width:790px;
height: 30px;
text-align: center;
}
#main-frame {
width:790px;
height: auto;
overflow: hidden;
}
import.xml
<!DOCTYPE HTML>
<head><link rel="stylesheet" href="style2.css"></link>
<body>
<table id="import-table">
<tr><td>Element 1</td><td>Element 2</td><td>Element3</td><td>Element 4</td><td>Element 5</td><td>Element6</td></tr>
<tr><td>Element 7</td><td>Element 8</td><td>Element9</td><td>Element 10</td><td>Element 11</td><td>Element12</td></tr>
</table>
</body>
</html>
I ended up figuring out most of my own problems. I named the file being sourced is as '.xml', since that was what it started out to be. But when I added HTML tagging, it didn't matter to the browser that it was now an html file, it still interpreted it as an XML file.
How do you float the content of my body left of the page via CSS?
I have tried this in CSS..
.body {
float: left;
}
but it doesn't work. Only when I add the method written below does it work..
.html, body {
float: left;
}
but I do not want to move the whole page, just the body content left.
What have I missed or shall I say, what am I doing wrong?
As long as you have an element with class body, this should work.
.body {
float: left;
}
div {
margin: 1em;
padding: 1em;
overflow: auto;
}
<div style="background-color: red;">
<div style="background-color: yellow;" class="body">
this is .body
</div>
text
text
</div>
By using your code you are telling your browser to select all tags with with the class "body"
What you are actually trying to do is select the body tag itself so your css should look like the following:
body{
CSS CODE HERE
}
"#"something{} = tag with the ID of "Something"
"."something{} = tag with the class of "Something"
""something{} = the tag itself "something" (example: body)
EDIT: EXAMPLE OF ID
HTML Document:
<html>
<head></head>
<body>
<table id="myIDExample">
</table>
</body>
</html>
CSS Document:
body{
float:right;
}
#myIDExample{
padding-left:100px;
}
Here is my site: http://mytestsite.nfshost.com/.
If you make your browser window thinner, you'll notice that the content in the page's 'body' tag overtakes the 'footer' element. Instead, I'd like it to merely push the 'footer' content down without engulfing it.
How do I do that?
Below are the relevant sections from the HTML and CSS.
<html>
<head>
-- HEAD CONTENT HERE --
</head>
<body>
<h1>U.S. Neighborhood Income Map</h1>
<h2>See how rich or poor every part of every city in America is</h2>
<div id="address-form-container">
<span id="form-pretext"> Enter a city name or address and pick a state (Or just a pick a state from the dropdown).</span>
<br>
<input id="address" type="textbox">
,
<select id="state-select">
<input type="button" value="Search">
<br>
<span id="note">(NOTE: If loading takes a while, try zooming in or out.)</span>
</div>
<div id="map-canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
-- MAP HERE --
</div>
<div id="below-map">
<p id="source-note" class="italics">
</div>
</body>
<footer>
<p id="contact">Please send all questions, comments, complaints, and suggestions to [EMAIL ADDRESS]</p>
</footer>
</html>
Here's the relevant CSS
html {
float: right;
height: 100%;
text-align: center;
width: 100%;
}
body {
background:url(./images/bg.png);
height: 85%;
position: relative;
right: 8px;
width: 100%;
}
#map-canvas {
height: 75%;
margin-top: 5px;
width: 100%;
}
footer {
margin-top: 3em;
}
footer must be inside body tag.
use css padding
footer {
padding-top: 25px;
}
Create a division with class = "clear"
css
div.clear {
clear:both
}
Use this above any division that you want to push down as page content grows. Also footer must be in body tag as Alex stated.