Message:

Hey guys i'm using Dompdf in laravel and i only have a h2 and a table on my dompdf view from which the pdf is generated so when i generate the pdf the both h2 and table elements kind of merges here is the actual problem.

Here is my code ->

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Student Records</title>



</head>



<body>





    <style>

        .pdfContainer {

            width: 100%;

            display: flex;

            align-items: center;

            flex-direction: column;

            justify-content: center;



        }







        table {

            width: 70%;

            text-align: center;

            margin-right: auto;

            margin-left: auto;

            float: bottom;

            border: none;



        }



        td {

            text-align: center;

            font-size: 0.95em;

            color: #252a34;

            font-weight: 500;

            background-color: #fff;

            white-space: nowrap;

        }





        th,

        td {

            padding: 15px;

            border: 1px solid #252a34 !important;

            border-collapse: collapse;

            border-spacing: 0;

        }



        th {

            text-align: center;

            font-size: 0.95em;

            font-weight: 800;

            border: none;

            white-space: nowrap;



        }









        .attdStatusTdpresent {

            color: #18a14f;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-weight: 600;

            font-size: 0.95em;

            font-family: "Merriweather Sans", sans-serif;

        }



        .attdStatusTdabsent {

            color: #b82348;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-weight: 600;

            font-size: 0.95em;

            font-family: "Merriweather Sans", sans-serif;

        }





        .attdStatusTdlate {

            color: #ff2e63;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-size: 0.95em;

        }



        .attBehaviourExcellent {

            color: #289672;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-size: 0.95em;

        }



        .attBehaviourGood {

            color: #00bfa6;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-size: 0.95em;

        }



        .attBehaviourAverage {

            color: #ffc947;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-size: 0.95em;

        }



        .attBehaviourBad {

            color: #ff2e63;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-size: 0.95em;

        }







        .attProgressExcellent {

            color: #289672;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-size: 0.95em;

        }



        .attProgressGood {

            color: #00bfa6;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-size: 0.95em;

        }



        .attProgressNeed {

            color: #ffc947;

            padding: 8px;

            width: 140px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-size: 0.95em;

            white-space: nowrap;

        }



        .attProgressprogressive {

            color: #185adb;

            padding: 8px;

            width: 110px;

            border-radius: 40px;

            margin: auto;

            text-transform: capitalize;

            font-size: 0.95em;

        }







        .pdfContainer {

            width: 100%;

            min-height: 100vh;

            display: flex;

            align-items: flex-start;

            box-sizing: border-box;

        }

    </style>

    <div class="pdfContainer">

        <table>

            <h2 style='margin:auto;'>{{$studentName}}</h2>

            <tr>

                <th> PRÉSENCE </th>

                <th> COMPORTEMENT </th>

                <th> PROGRES </th>

                <th> DATE DE L’ATELIER </th>

            </tr>

            @foreach($records as $record)

            <tr>

                <td>

                    <p class="attdStatusTd{{$record['att_status']}}"> {{$record['att_status']}} </p>

                </td>

                <td>

                    <p class="attBehaviour{{$record['behaviour']}}"> {{$record['behaviour']}} </p>

                </td>

                <td>

                    <p class="attProgress{{$record['progress']}}"> {{$record['progress']}} </p>

                </td>

                <td>

                    <p> {{$record['customDate']}} </p>

                </td>

            </tr>

            @endforeach

        </table>

    </div>

</body>

</html>

My Answer:

html







    PDF





    Title


    









        
            Header 1
            Header 2
        
        
            Data 1
            Data 2

Make sure you are using proper CSS styles to separate the h2 and table elements in the PDF. You can try adding some margin or padding to the h2 element to create some space between the h2 and table elements. Additionally, you can also try adding a page break before the table element to ensure proper arrangement in the PDF.

Rate this post

4 of 5 based on 9112 votes

John Davidson

javascript - Dompdf cannot arrange html elements properly

Title

Rate this post

Comments