Letterhead footer correct in html preview, wrong in printout/print preview

ERPNext Customize ERPNext
1

Hi,
As noted in tutorial here, I am trying the below html for footer.

<div class="text-center" style="">
    <div style="font-weight: bold; font-size: 16px;"> XXX YYY XXXXX</div>
    <div> 3/293, doignoasidgn osadignaso di oasndginao goasdino</div>
</div>

This shows correctly in preview for ex for a sales invoice. Note the html footer is at the bottom.

image

But that is not the case, when I print out. Instead of staying at bottom, it simply sits next to last html content.

image
image376×528 53.2 KB

Isn’t this a bug then? Kindly help to fix it.

2

Hi @Paari_Vendhan,

Please apply a style like this.

<style>
@media print {
  .text-center {
    position: fixed !important;
    bottom: 0 !important;
  }
}
</style>

Then reload and check it.

Thank You!

3

@NCP Now its at bottom , but not centered. I applied that as well, but in vain. My updated code as below.

<div class="text-center" style="">
    <div style="font-weight: bold; font-size: 16px;"> XXX YYY XXXXX</div>
    <div> 3/293, doignoasidgn osadignaso di oasndginao goasdino</div>
</div>
<style>
@media print {
  .text-center {
    text-align: center;
    position: fixed !important;
    bottom: 0 !important;
  }
}
</style>

Result in print preview:

image
image377×535 52.3 KB

4

For your content according to style like

first change the class and apply it.

<style>
@media print {
  .text-center1 {
    position: fixed !important;
    bottom: 0 !important;
  }
}
</style>

<div class="text-center1" style="width: 100%;">
    <div style="font-weight: bold; font-size: 16px; margin-left: 80mm;"> XXX YYY XXXXX</div>
    <div style="margin-left: 50mm;">3/293, doignoasidgn osadignaso di oasndginao goasdino</div>
</div>
5

Great, this seems to be working for now… but where are you centering it?

image
image372×528 52 KB