Need static Footer Options

[Shaaz]

see this now i made via invoice setting footer below code

<p><img style="position: fixed; left: 0; bottom: 0;" src="https://i.ibb.co/CwDcQs6/Footer.jpg" alt="" width="100%" /></p>



but the prblm


3- https://snipboard.io/1LrPcn.jpg see when print the data overwrite the footer content

so please need solution urgent ,

now working fine for temporary but overwriting for temporarily can you help me with css please share the css i will modify the css, and need this feature also




This post has been edited by Shaaz: Sep 6 2023, 05:56 AM

[Dennis Leon]

see this now i made via invoice setting footer below code

<p><img style="position: fixed; left: 0; bottom: 0;" src="https://i.ibb.co/CwDcQs6/Footer.jpg" alt="" width="100%" /></p>



but the prblm


3- https://snipboard.io/1LrPcn.jpg see when print the data overwrite the footer content

so please need solution urgent ,

now working fine for temporary but overwriting for temporarily can you help me with css please share the css i will modify the css, and need this feature also

Hello,

The issue you're facing is that the printed content is overlapping the fixed footer due to the way browsers handle printing. Here's how you can fix it using CSS:

1. Wrap your content:

Wrap all your content (except the footer) in a container element, like a <div>.
Give this container a bottom padding equal to the height of your footer.
2. Position the footer:

Set the footer's position to fixed and bottom to 0.
Ensure the footer has a fixed height.
3. Adjust z-index (optional):

If the footer still overlaps, you can try setting a higher z-index for the footer. This will ensure it appears above other elements on the page.
Here's the CSS code:

CSS
/* Wrap content */
.content {
padding-bottom: 100px; /* Adjust the padding to match your footer height */
margin-bottom: -100px; /* Adjust the margin to negate the padding */
}

/* Footer styles */
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100px; /* Adjust the height as needed */
background-color: #f0f0f0; /* Set your desired footer background color */
z-index: 999; /* Optional, adjust if needed */
}

Wrapping the content with padding and margin ensures that the footer stays below the content even when printing.
The fixed position and bottom positioning keep the footer at the bottom of the viewport.
The z-index (optional) helps the footer appear above other elements if necessary.

I hope the information may helps you.