headerview, footerview with tailwindcss #44

RVP04 · 2024-01-18T14:46:20Z

RVP04
Jan 18, 2024

I have 3 files app.blade.php, header.blade.php and footer.blade.php

app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{{ asset('fonts/DINNextLTArabicMedium.ttf') }}" rel="stylesheet" type="font/ttf">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <title>@yield('title' ?? env('app.name'))</title>
    <style>
        @font-face {
            font-family: 'DINNextLTArabicMedium';
            src: url('{{ asset('fonts/DINNextLTArabicMedium.ttf') }}') format('truetype');
            font-weight: 300; /* Adjust font-weight if needed */
            font-style: normal; /* Adjust font-style if needed */
        }
        body {
            font-family: 'DIN Next Arabic - Medium', "Courier New";
            font-size: 10pt;
            height: 100%;
        }
    </style>
</head>
<body class="flex flex-col min-h-screen ml-10 mr-10">

<!-- Main Content (Add your content here) -->
<main class="flex-grow p-8 mt-5">
    @yield('content')
</main>

</body>
</html>

header.blade.php

<header class="h-15 flex items-center justify-between mt-5">
    <img src="{{asset('img/logo.png')}}"
         class="w-50 h-20 object-cover rounded-full absolute top-3 right-1 pr-2"/>
</header>
<h1 class="text-l uppercase font-bold text-center mt-8">@yield('reportTitle','')</h1>

footer.blade.php

<footer class="flex items-center justify-between p-2 mt-auto border-t border-black pt-1">
    <div class="flex items-center">
        <p class="text-black" style="font-size:7pt;">Page @pageNumber of @totalPages</p>
    </div>
    <div>
        <img src="{{asset('img/logo.png')}}" class="w-15 h-5 object-cover rounded-full" />
    </div>
</footer>

in the main content file

@extends('layout.reports.app')

@section('title', 'Missing Student Report ')

@section('reportTitle', ($reportTitle ?? '' ))

@section('content')
    <div class="p-0">
        <table class="table-auto border border-black">
            <thead>
            <tr>
                <th class="w-1/1 border border-black px-2 py-2">S.No</th>
                <th class="w-2/4 border border-black px-2 py-2">Branch</th>
                <th class="w-1/4 border border-black px-2 py-2">Missing Student ID</th>
            </tr>
            </thead>
            <tbody>
            @forelse($missingStudents as $branchNames => $branchName)
                @foreach($branchName as $missingStudent)
                    <tr>
                        <td class="border border-black px-4 py-2">{{$loop->index+1 ?? ''}}</td>
                        <td class="border border-black px-4 py-2">{{$missingStudent->branch->short_name ?? ''}}</td>
                        <td class="border border-black px-4 py-2">{{$missingStudent->student_id ?? ''}}</td>
                    </tr>
                @endforeach
            @empty
                <tr>
                    <td class="border px-4 py-2" rowspan="2">No student id found</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
@endsection

controller function

 return Pdf::view('superadmin.reports.pdf.missing_students', [
            'reportTitle' => 'Missing Student Reports - Branch Wise',
            'missingStudents' => $missingStudents
        ])->headerView('layout.reports.header')
            ->footerView('layout.reports.footer')
            ->format('a4')
            ->name('Missing Students Name List');

here header and footer not showing. Any idea how to fix

ArielMejiaDev · 2024-01-18T15:37:44Z

ArielMejiaDev
Jan 18, 2024

There is no way to make this, this is related of how puppeteer works all the content can be generated using tailwindcss, but for heades and footer it requires a style tag or style attribute for both cases, take in mind that the unique css propety that is required to be able to see header and footer is font-size, for example to center pagination you can use margin: 10px auto 10px auto

7 replies

RVP04 Jan 18, 2024
Author

regarding header sir ?

ArielMejiaDev Jan 18, 2024

The same you can use a tailwindcss to css translator (there are a few online) then apply your changes to your header component

RVP04 Feb 3, 2024
Author

image still not coming sir

dylanBcp Mar 23, 2024

+1

Same, the image not showing in footer

RVP04 Mar 24, 2024
Author

@dylanBcp please share with some piece code so that we can help you

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

headerview, footerview with tailwindcss #44

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

headerview, footerview with tailwindcss #44

RVP04 Jan 18, 2024

Replies: 1 comment · 7 replies

ArielMejiaDev Jan 18, 2024

RVP04 Jan 18, 2024 Author

ArielMejiaDev Jan 18, 2024

RVP04 Feb 3, 2024 Author

dylanBcp Mar 23, 2024

RVP04 Mar 24, 2024 Author

RVP04
Jan 18, 2024

Replies: 1 comment 7 replies

ArielMejiaDev
Jan 18, 2024

RVP04 Jan 18, 2024
Author

RVP04 Feb 3, 2024
Author

RVP04 Mar 24, 2024
Author