CODEWITHSUNDEEP
htmlcss
Radio Doc
Radio Doc

Reputation: 397

CSS fixed position footer stacks when printing

Maybe someone can explain what's going on here, because I've been racking my brain for a while on this and all of my web searching has failed to turn up a functional answer. Here's a sample HTML page with automatically generated page numbers:

function pageCount() {
  console.log(document.getElementsByClassName('page').length);
  return document.getElementsByClassName('page').length;
}
document.querySelectorAll(".total").forEach(function(el, i) {
  el.innerHTML = pageCount();
});
.page {
  width: 8in;
  height: 1in;
  padding: 0em;
  margin-top: .5in;
  margin-left: 0in;
  margin-right: 0in;
  margin-bottom: 0.25in;
}

body {
  color: black;
  counter-reset: pagen;
  font-family: "Courier New", Courier, monospace;
  font-size: 10pt;
}

.footer {
  counter-increment: pagen;
  margin: auto;
  width: 8in;
  display: table;
}

#footer-left:before {
  content: "Page " counter(pagen) " of ";
}

.ptable {
  page-break-before: always;
  page-break-inside: avoid;
}

@media print {
  .footer {
    position: fixed;
    bottom: 0;
  }
}
<html>
<head>
  <style></style>
</head>
<body>
  <div class="page">
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
  <div class="page">
    <table class="ptable"></table>
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
  <div class="page">
    <table class="ptable"></table>
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
</body>
<script></script>
</html>

On screen, we see our separate footer fields showing the page number. When you go to print it, however, all of the footers end up stacking on top of each other in one giant mess. position: fixed; bottom: 0; causes the footer elements to stack up on top of each other, changing fixed to absolute means they get stacked on page 1 only and changing to relative just moves the footer to the bottom of the content. Any suggestions on how to correct this behavior? Browser used for testing is Chrome.

Upvotes: 3

Views: 2139

Answers (1)

Rishab Tyagi
Rishab Tyagi

Reputation: 926

The position:fixed; is defined in browser's css.But you can override it.That means console is not the part of website.The javascript is run on that.You have to add style for every browser's console.

function pageCount() {
  console.log(document.getElementsByClassName('page').length);
  return document.getElementsByClassName('page').length;
}
document.querySelectorAll(".total").forEach(function(el, i) {
  el.innerHTML = pageCount();
});
.page {
  width: 8in;
  height: 1in;
  padding: 0em;
  margin-top: .5in;
  margin-left: 0in;
  margin-right: 0in;
  margin-bottom: 0.25in;
}

body {
  color: black;
  counter-reset: pagen;
  font-family: "Courier New", Courier, monospace;
  font-size: 10pt;
}

.footer {
  position:fixed;
  margin-top:340px;
  width: 8in;
   
}

#footer-left:before {
  content: "Page " counter(pagen) " of ";
}

.ptable {
  page-break-before: always;
  page-break-inside: avoid;
}

@media print {
  .footer {
    position:fixed;
    bottom: 0;
  }
}
<html>
<head>
  <style></style>
</head>
<body>
  <div class="page">
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
  <div class="page">
    <table class="ptable"></table>
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
  <div class="page">
    <table class="ptable"></table>
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
</body>
<script></script>
</html>

Upvotes: 1

Related Questions