Is there a way to ensure that the header is centered at the top and the footer is centered at the bottom of every printed page, even when

Currently, I am utilizing spatie/browsershot to generate PDF documents within a Laravel project. While it offers convenient methods such as headerHtml and footerHtml for customization, there seems to be an issue with handling images. Specifically, only base64/svg images are accepted, resulting in some images with transparent backgrounds being cut off during printing.

To work around this limitation, I have opted to use CSS to incorporate my header and footer designs. However, a new challenge arises when applying @page margin, causing the header and footer elements to shift due to the imposed margins. This can be observed in the following illustration: https://i.stack.imgur.com/hxTMU.png

It's worth noting that I need to include @page margin on every page instead of setting margin-top/bottom directly on headers (h1-h6) due to the dynamic nature of the content where a pagebreak might occur unpredictably.

In the absence of @page margin, the header and footer alignment remains intact, but the content loses its intended margin layout, leading to content overlapping with the header section, illustrated here: https://i.stack.imgur.com/7qW8h.png

Please see below the code snippet from the index blade file:

<!DOCTYPE html>
<html lang="en">

<!-- The rest of your HTML code comes here -->

If you encounter any issues or have suggestions for resolving this matter, kindly provide your feedback. Thank you for your assistance.

htmlcsslaravelbrowsershot

Answer №1

enhance your CSS skills

 main {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%; 
        padding: 20px; 
        box-sizing: border-box; 
        background-color: #ffffff; 
        opacity: 0.6;
        text-align: center; 
        color: #672F09;
        font-size: 16px;
    }

aside {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%; 
        padding: 10px; 
        box-sizing: border-box; 
        background-color: #ffffff; 
        opacity: 0.6;
        text-align: center;
        font-size: 12px;
    }

Answer №2

I found a solution to my problem by using the table hack method detailed in an informative blog post I came across: https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a

"To prevent content overlapping with header/footer sections, I employed tables as empty placeholders. These are intentionally left blank to ensure nothing shows on the final page. Subsequently, fixed-positioning was utilized to accurately position the header/footer within these placeholder areas."

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Grant Proposal</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @media print {
            body {
                -webkit-print-color-adjust: exact !important;
                /* Chrome, Safari 6 – 15.3, Edge */
                color-adjust: exact !important;
                /* Firefox 48 – 96 */
                print-color-adjust: exact !important;
                /* Firefox 97+, Safari 15.4+ */
            }

            div.paper[data-size="A4"] {
                margin: 0;
                box-shadow: 0;
                -webkit-column-beak-inside: avoid;
                page-break-inside: avoid;
                break-inside: avoid;
            }

            div.pagebreak {
                break-after: page;
            }

            header,
            .header-space {
                height: 3.54cm;
            }

            footer,
            .footer-space {
                height: 2.54cm;
            }

            ... (content abbreviated for brevity) ...

        }
    </style>

</head>

... (content abbreviated for brevity) ...

    </div></answer2>
<exanswer2><div class="answer" i="76958841" l="4.0" c="1692761724" a="bGFuY2Uyaw==" ai="12438210">
<p>The issue I faced was successfully resolved by implementing the table hack technique from this specific blog resource: <a href="https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a" rel="nofollow noreferrer">https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a</a></p>
<p><code>"The key approach is to utilize tables as placeholders to prevent content overlap with header/footer elements. Keeping these placeholders empty ensures no display on the last page. By applying a fixed-position strategy, the actual header/footer can be positioned within these vacant placeholders."


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Grant Proposal</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @media print {
            body {
                -webkit-print-color-adjust: exact !important;
                /* Chrome, Safari 6 – 15.3, Edge */
                color-adjust: exact !important;
                /* Firefox 48 – 96 */
                print-color-adjust: exact !important;
                /* Firefox 97+, Safari 15.4+ */
            }

            div.paper[data-size="A4"] {
                margin: 0;
                box-shadow: 0;
                -webkit-column-break-inside: avoid;
                page-break-inside: avoid;
                break-inside: avoid;
            }

            div.pagebreak {
                break-after: page;
            }

            header,
            .header-space {
                height: 3.54cm;
            }

            footer,
            .footer-space {
                height: 2.54cm;
            }

            header {
                position: fixed;
                top: 0;
                left: 50%;
                transform: translate(-50%, 0);
                opacity: 0.6;
                color: #672f09;
                width: 16cm;
                font-size: 16px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            footer {
                position: fixed;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 0);
                opacity: 0.6;
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 16cm;
                font-size: 12px;
                margin: 0 auto;
            }
        }
    </style>

</head>

<body>

    <table>
        <thead>
            <tr>
                <td>
                    <div class="header-space">&nbsp;</div>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ $slot }}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <div class="footer-space">&nbsp;</div>
                </td>
            </tr>
        </tfoot>
    </table>

    <header>
        {{ $heading }}
    </header>
    <footer>
        {{ $footer }}
    </footer>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Facing issues with integrating json data into html through svelte components

Just starting out with svelte and taking on a project for my internship. I have my local json file and I'm struggling to integrate it into my HTML. I've been scouring the internet but haven't found a solution yet. This is what I've tr ...

htmljsonsvelte

Effortlessly inserting and posting data into a database with Laravel, Bootstrap Modal, and Ajax

My issue is that I am unable to retrieve the value of a textarea input in a Bootstrap modal using Input::get(), as it returns null. The submit button and text input in my view: <button type="button" class="btn btn-danger" onclick="customModalSubmitF ...

phpjqueryajaxtwitter-bootstraplaravel

My custom class is being ignored by Tailwind CSS within breakpoints

I'm attempting to incorporate some animation on the height property within the md breakpoint, but for some reason Tailwind CSS isn't applying my class. <div className={`h-12 bg-blue flex w-full text-white fixed mt-1 md:bg-white ${scrolling ? ...

cssreactjsnext.jstailwind-css

What is the best way to make hover text that also copies when you highlight the main text?

Currently, I am utilizing a basic bootstrap tooltip for creating tables with jQuery. However, I require a specific functionality that the standard bootstrap tooltip does not provide. I need the ability to copy the base text and have it appear as "base tex ...

jqueryhtmlcssbootstrap-4

Designing a scrollbar for a tr element using HTML and CSS

I am struggling to create a scrollbar for the inner table that is not being displayed within its container. The container has a yellow background while the table itself is blue. My goal is to have a scroll bar specifically within the table. For more info ...

htmlcss

Identify the browser dimensions and implement CSS styling for all screen resolutions

I am currently facing an issue with a function that I have created to apply CSS changes to a menu based on browser resizing and different resolutions. The problem lies in the fact that my function does not seem to be correctly interpreted by the browser. W ...

javascriptjqueryhtmlcss

Expandable menu featuring visual icons and a toggle symbol

I am in need of assistance to implement an accordion menu with unique picture icons for each item on the left and a toggle icon (such as + or a chevron) on the right side. Visually, I would like it to resemble this design (https://codepen.io/kathykato/pen ...

htmlcssaccordionsquarespace

Incorporating Node.JS variables within an HTML document

After building a simple site using Express, I discovered that Node.js variables can also be used with Jade. exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; This is the code for the index file: ext ...

javascripthtmlnode.js

Optimize the size of div elements using jQuery

I am looking for a way to minimize certain div elements on my webpage using symbols from font-awesome instead of the traditional "-" and "+". However, I am having trouble inserting the classes of the icons into my code. I attempted replacing the .html meth ...

jqueryhtmlminimize

Is there a way to control the quantity of items being displayed in my ng-repeat directive?

Here are the objects in my array: 01-543BY: Array[1] 03-45BD23: Array[1] 03-67BS50: Array[1] 06-78FR90: Array[1] 07-467BY3: Array[1] 09-23DF76: Array[1] Currently, I have a total of six objects, but I only want to display four. This is how I am using ng- ...

javascriptangularjshtml

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

javascriptjqueryhtmlcssjquery-mobile

Can you provide me with instructions on how to change the background image?

Having trouble with the CSS code I wrote for a background-image. It's not showing up when I set it in my CSS stylesheet. I tested it and found that it only works when written in the body... <body background="Tokyo.png"> ...but not in the styl ...

csshtml

What is the best way to define the active <li> tab using JQuery?

Initially, my HTML code includes a set of <li> elements that I want to dynamically add to the existing <ul>. <ul class="tabs" id="modal_addquestion_ul"> <li class="tab-link current" data-tab="multipleChoice">Multiple Choice< ...

javascriptjqueryhtml

Achieving an italicized appearance throughout an HTML document

I recently downloaded a sample page from the Mathjax website and acquired their package from Github to use it locally. In addition, I wanted to incorporate the computer modern font, so I unzipped the file containing ttf files into fonts/cmu. Here's ...

htmlcssmathjax

I'm looking to customize the background color and font size for an accordion in Bootstrap 4 with Vue.js. Can anyone provide guidance

Hello, I am currently using an accordion with Bootstrap 4 and Vue.js. Here is the code snippet: <div class="faq_accordion" role="tablist"> <b-card no-body class="mb-1"> <b-card-header header-tag=" ...

csstwitter-bootstrapvue.jsbootstrap-4

Is it possible to adjust the CSS code linked to the HTML tag based on the specific webpage being viewed?

I am facing an issue with the homepage of my website, which uses Scrollmagic.js for smooth scrolling. In order for the sticky footer CSS to work properly on all other pages, the HTML tag needs to have a height of 100%. However, if I add this height value t ...

javascriptjqueryhtmlcss

Permit the use of the "&" character in mailto href links

When including an email mailto href link and using a & character in the subject, it can cause issues with code rendering. For example, if the subject is "Oil & Gas," only "Oil" may show up. In most cases, you could simply replace the & with th ...

javascriptphphtmlhrefmailto

If the URL matches a specific path, then append a parameter

I've created a script that adds a parameter to a URL based on specific subfolders. For example, if the URL contains /de, it will add ?_sft_language=german. However, I'm encountering an issue where the code is running multiple times instead of jus ...

javascripthtmljquery

Flexbox transforms Safari's Horizontal Nav into a Vertical layout

Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, i ...

htmlcsssafariflexbox

Within a <div> element, there is a <span> element with a border and a specific line height. The

Can anyone explain why the border of the span is positioned next to the top? When I remove the display property for the span, it seems to work fine. Thank you. div { height: 80px; border: 1px solid green; line-height: 80px } .inner-span { heigh ...

htmlcss