CODEWITHSUNDEEP
phpcsslaraveldompdf
Ropali Munshi
Ropali Munshi

Reputation: 2996

Laravel Dompdf: CSS style is breaking in PDF

I am trying to generate a pdf file from HTML using the dompdf package in laravel. When I am trying to load the view in the browser everything works perfectly but when I generate the pdf of the same view file , the CSS styling break. In the browser it looks like this, enter image description here

In pdf file it looks like this, enter image description here

this is my HTML code,

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

<head>
    <style type="text/css" media="all">
        body {
            width: 100%;
            height: 100%;
            margin: 20px;
            padding: 0;
            background-color: #FAFAFA;
            font: 12pt "Tahoma";
        }

        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }



        @page {
            size: A4;
            margin: 0;
        }

        @media print {

            html,
            body {
                width: 210mm;
                height: 297mm;
            }

            .page {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin-top: 80px;


            font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        }


        .card {
            height: 320px;
            width: 530px;
            margin: 0 auto;
            background: #ECECEC;
            border-radius: 4px;
        }


        .card header {
            background: #ED3D34;
            height: 90px;
            width: 100%;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom: 2px solid rgba(180, 80, 80, .5);
            border-top: 1px solid rgba(221, 108, 108, .8);

            padding: 35px 20px;
            opacity: .9;
        }



        .card header h1 {
            color: #fff;
            line-height: 90%;
            font-size: 20px;
            margin: 0;
            text-shadow: -1px -1px 1px rgba(0, 0, 0, .5);
        }

        .card article {
            padding: 20px;
        }

        .card article img {

            float: left;
            margin-right: 30px;
            width: 130px;
            height: 177px;
            transition: all .3s ease-in-out;
        }

        .card article h2 {
            color: #515355;
            float: left;
            margin: 0 5px 15px 0;
            font-weight: normal;
            padding: 0 0 8px 0;
            width: 250px;
        }

        .card article .area {
            height: 170px;
            width: 440px;
        }

        .card article .area h3 {
            margin: 0;
            color: #5F6163;
            font-size: 20px
        }

        .card article .area ul {
            margin: 5px 0 30px 0;
            padding: 0;
            list-style: none;
        }

        .card article .area ul li {
            margin: 5px 0 0 0;
            font-size: 16px;
            color: #94957F;
            text-shadow: 0 0 1px rgba(0, 0, 0, .3);
        }

        .card article .area ul li .bar {
            width: 280px;
            height: 15px;
            display: inline-block;
            border-radius: 50px;
            float: right;
            margin: 0 15px 0 0;

            opacity: .9;

            background-color: #CACACA;
            box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35);
        }

        .card article .area ul li .bar:before {

            left: 0;
            width: 0;
            height: 15px;
            background: rgb(254, 213, 121);

            box-shadow:
                inset 0 4px 4px rgba(255, 255, 255, .3),
                inset 0 -2px 3px rgba(0, 0, 0, .05),
                0 1px 0 0px #D29D40;
            display: inline-block;
            border-radius: 50px;
            content: '';
            z-index: -1;
        }

        .card article .area ul li .bar.percent-100:before {
            width: 280px;
        }

        .card article .area ul li .bar.percent-90:before {
            width: 260px;
        }

        .card article .area ul li .bar.percent-80:before {
            width: 240px;
        }

        .card article .area ul li .bar.percent-70:before {
            width: 220px;
        }

        .card article .area ul li .bar.percent-60:before {
            width: 200px;
        }

        .card article .area ul li .bar.percent-50:before {
            width: 180px;
        }

        .card article .area ul li:before {
            /* content: '\2605'; */
            margin-right: 5px;
        }

        .card article .area::-webkit-scrollbar {
            width: 10px;
        }

        .card article .area::-webkit-scrollbar-track {
            background-color: rgba(217, 217, 217, .5);
            border-radius: 50px;
        }

        .card article .area::-webkit-scrollbar-thumb {
            background: rgba(184, 184, 184, .5);
            box-shadow:
                inset 1px 1px 0 rgba(0, 0, 0, 0.10),
                inset 0 -1px 0 rgba(0, 0, 0, 0.07);
            border-radius: 50px;
        }
    </style>
</head>

<body>

    <div class='card'>
        <header>
            <h1 class="text-center">Bright Group Tuition</h1>
        </header>
        <article>
            <img alt='My Pic' id='thumb' src='https://s.cdpn.io/1202/timpietrusky_on_rampage_small_1.jpg'>
            <h2>Tim Pietrusky</h2>
            <div class='area'>
                <ul>
                    <li>
                        Std: 10th
                    </li>
                    <li>
                        Batch: B1
                    </li>
                    <li>
                        DOB: 12/12/12
                    </li>
                    <li>
                        Academic Year: 2020-2020
                    </li>
                    <li>
                        Contact Number: 8390790935
                    </li>
                    <li>
                        Address: 911B,Baker Street
                    </li>
                </ul>


            </div>
        </article>
    </div>
</body>


</html>

This is the code to generate pdf file,

public function generateIDCards()
    {
        // $pdf = PDF::loadView('templates.idcard');
        $pdf = \App::make('dompdf.wrapper');
        $html = view('templates.idcard')->render();
        $pdf->loadHTML($html);
        return $pdf->download('card.pdf');
        // return $html;
    }

Any suggestions would be appreciated...

Upvotes: 0

Views: 11295

Answers (2)

Sidharth Gupta
Sidharth Gupta

Reputation: 11

In your css just change the height to this:



    .card
    {
        height: 400px;
        width: 530px;
        margin: 0 auto;
        background: #ECECEC;
        border-radius: 4px;
    }

Upvotes: 1

Digvijay
Digvijay

Reputation: 8927

You have to set the Content Type to
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

Hope it helps. Cheers!

Upvotes: 0

Related Questions