Footer not visible when having html background-color #80

coreyfreeman82 · 2024-02-09T12:34:33Z

coreyfreeman82
Feb 9, 2024

The footer is not visible when I give the html a background color. I can see the footer content when removing the html background but the backgrounds inside the footer don't work either.

return pdf()->view('pdfs.testcases', compact(['project', 'testcases']))->footerView('pdfs.footer')->name($project->getTestDocumentFileName());

testcases.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css2?family=Kadwa:wght@700&family=Lato:ital,wght@1,300&display=swap"
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
          rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>{{$project->getTestDocumentTitle()}}</title>
    <style>
        html {
            background-color: #eaf2f4;
        }
    </style>
</head>
<body>

@include('pdfs.frontpage', ['title' => $project->getTestDocumentTitle() ])

@pageBreak

<div style="" class="shadow bg-white p-5 m-12 rounded-lg">
    <h2 class="text-2xl pb-6">@lang('testcase.testcase_plural')</h2>

    <div>
        /// content
    </div>
</div>

@pageBreak

@foreach($testcases as $index => $testcase)
    <div class="shadow bg-white p-5 m-12 rounded-lg">
    /// some content
    </div>

    @pageBreak
@endforeach
</body>
</html>

Footer.blade.php where the background colors don't work even if my html doesn't have a background:

<style>
    footer {
        color: red;
        font-size: 16px;
        margin: 10px 0;
        z-index: 999999;
        position: relative;
        background-color: green; //not showing
    }

    .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: orange; //not showing
    }
</style>

<footer>
    <div class="footer">
        <div>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Laravel.svg/1200px-Laravel.svg.png" width="300" alt="logo"> //showing the broken image icon
        </div>
        <div>
            <p>Page @pageNumber of @totalPages</p>
        </div>
    </div>
</footer>

coreyfreeman82 · 2024-02-12T15:25:56Z

coreyfreeman82
Feb 12, 2024
Author

@freekmurze i believe this is an issue in this package/browsershot or do i have to change anything?

2 replies

ArielMejiaDev Feb 12, 2024

I think this is a limitation of how puppeteer handles background color, you can check the docs: https://github.com/spatie/laravel-pdf/releases/tag/1.2.0

You would need to add print-color-adjust css rule

<style>
    html {
        -webkit-print-color-adjust: exact;
    }
</style>

Take in mind that Puppeteer leave some blank space for the header and footer so both would always look like blank white bars.... You would require to adjust the margins based on your PDF requirements.

coreyfreeman82 Feb 16, 2024
Author

@ArielMejiaDev didn't change anything. Footer still not visible when using a background color on the html and the background colors in the footer also not working.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Footer not visible when having html background-color #80

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Footer not visible when having html background-color #80

Uh oh!

coreyfreeman82 Feb 9, 2024

Replies: 1 comment · 2 replies

Uh oh!

coreyfreeman82 Feb 12, 2024 Author

Uh oh!

ArielMejiaDev Feb 12, 2024

Uh oh!

coreyfreeman82 Feb 16, 2024 Author

coreyfreeman82
Feb 9, 2024

Replies: 1 comment 2 replies

coreyfreeman82
Feb 12, 2024
Author

coreyfreeman82 Feb 16, 2024
Author