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

Utilize Vue.js to easily upload images alongside form input fields

I have recently started a small project with Vue Js. I am trying to incorporate an upload file option in my contact form. Due to the numerous input text fields, I am using serialize for the form. However, I am facing issues with the append function. How ca ...

javascriptjqueryhtmlvue.jsnuxt.js

Why is my CSS selector automatically converted to uppercase in Internet Explorer?

I am facing an issue with my CSS file. Here is how it looks: /*mycss.css*/ body { margin: 0px; padding: 0px; } a:link { color: rgb(255, 255, 255); font-weight: normal; text-decoration: underline; } a:visited { color: rgb(255, 255, 255); font-weight: norm ...

cssinternet-explorercss-selectors

Having trouble getting my HTML file and CSS styles to render properly in Chrome

Currently, I am in the process of developing a website and facing challenges with displaying CSS properties accurately. Despite seeking input from friends and users, my HTML file is not rendering as expected within various browsers such as Chrome, Edge, an ...

javascripthtmlcssbootstrap-4

How to make your divs stand out using Bootstrap

Can anyone assist me in aligning my divs based on the example below? Here is what I have achieved so far: I am struggling to apply spacing between the two divs, and they are not of equal height. My HTML: <div class="container - fluid"> ...

htmlcsstwitter-bootstrapgrid

Guide to achieving a powerful click similar to a mouse

I've been struggling to get an audio file to play automatically for the past three days, but so far I haven't had any luck. The solutions I've tried didn't work in my browser, even though they worked on CodePen. Can anyone help me make ...

javascripthtml

Positioning two elements next to each other and keeping them aligned evenly

CSS - How to Float Two Elements Side by Side I am facing a similar challenge in achieving the layout I want. With a percentage-based layout, either my menu overlaps with the content or the content gets pushed below the menu when viewed on mobile devices. ...

htmlcss

CSS based on conditions for 2 specific divs

Hello, I am working on an HTML page where I need to apply CSS only if certain conditions are met. The div with the id "flipbook-page3-front" will always be present on this HTML page. Sometimes, another div with the id "pagesFlipbook" may also appear on t ...

htmlcss

Store data in LocalStorage according to the selected value in the dropdown menu

Can you help me understand how to update the value of a localstorage item based on the selection made in a dropdown menu? <select id="theme" onchange=""> <option value="simple">Simple</option> <option valu ...

javascripthtml

What is the best way to create a sliding animation on a div that makes it disappear?

While I may not be an expert in animations, I have a question about sliding up the "gl_banner" div after a short delay and having the content below it move back to its original position. What CSS properties should I use for this animation? Should I use css ...

javascripthtmlcsscss-transitionscss-animations

step-by-step guide on showcasing and concealing textbox borders

Within a table, I have a column with a text box for users to edit the text as needed. The edited text is properly being saved using the onkeyup event. However, I want to hide the border of the text box after editing, so only the edited text is visible. If ...

htmlcss

Personalizing CSS classes in ASP.NET

In the project I'm currently developing, users will have the ability to customize the font color of header titles. These header titles are styled using values from a cssClass, which includes properties such as font-size, font-color, font-weight, and ...

asp.netcss

How can I center a Bootstrap modal vertically and make it responsive?

Is there a way to vertically center the bootstrap modal? I have been searching for a solution, but none seem to be responsive or effective. My website is using Bootstrap 3. The modal does not adjust properly on smaller screens or when the browser window i ...

javascriptjqueryhtmlcsstwitter-bootstrap

Displaying Vue.js tooltips in a table when the text gets clipped

I'm currently facing an issue with creating a tooltip in my vue.js document. I attempted to follow this guide from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip in order to create one, but it's not working as expected. Her ...

javascripthtmlcssvue.js

Using JavaScript, HTML, and CSS to select slices of a donut pie chart created with SVG

I have successfully implemented CSS hover effects and can manipulate the HTML to use the .active class. However, I am facing difficulties in making my pie slices switch to the active state upon click. Moreover, once this is resolved, I aim to enable select ...

javascripthtmlcsssvgpie-chart

Utilize ngFor in Angular Ionic to dynamically highlight rows based on specific criteria

I'm working on an application where I need to highlight rows based on a count value using ngFor in Angular. After trying different approaches, I was only able to highlight the specific row based on my count. Can someone please assist me? Check out m ...

javascriptcssangulartypescriptionic3

Updating an HTML Table with AJAX Technology

I'm struggling to figure out how to refresh an HTML table using AJAX. Since I'm not the website developer, I don't have access to the server-side information. I've been unable to find a way to reload the table on this specific page: I ...

javascripthtmlajax

Execute JavaScript function after the reset button has been clicked

Is there a way to execute a function right after the form elements are reset by the <input type="reset"/> button? ...

javascripthtmlonclickreset

Can I use jQuery to disable all elements within a div, including anchor and paragraph tags?

Can anyone offer assistance with HTML and CSS? I am trying to disable all content inside a div that has the class "main-wrapper" when a user clicks on a logout button using a jQuery function. I have attempted two methods, but so far without success! funct ...

jqueryhtmlcssjquery-ui

Enhance the Bootstrap Sass by integrating a color scheme that seamlessly complements all elements such as backgrounds, text, and borders throughout the

Hi there, I'm having an issue with Bootstrap and Sass when trying to add new colors to my theme map. Can anyone help me figure out what I might be doing wrong? Thank you in advance. I've been attempting to include a new color in the theme-colo ...

csssassbootstrap-5theming

Styling for jQuery mobile panels disappears when used on multiple pages

Currently, I am working on developing a mobile application for PhoneGap using jQuery Mobile. The app consists of multiple pages within the same HTML document. I have configured it so that all pages share the same panel, but I am facing an issue with the st ...

jqueryhtmljquery-mobilecordova