CODEWITHSUNDEEP
phphtmlcsslaraveldompdf
Aldo Adhi
Aldo Adhi

Reputation: 95

text-align: center on Generate PDF via DomPDF (Laravel) a little bit offset to the right

I use laravel-dompdf to generate pdf from view. Everything works fine except the "text-align: center" CSS.

It aligns to the center, but a little bit "offset" to the right.

Here's the sample PDF output

enter image description here

As you can see the "FOTO JAMINAN", "as", "no rek", and "FOTO PERIKATAN" text are a little bit offset to the right.

Here's the view

<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">
    <style>
        .table1 {
            font-family: sans-serif;
            color: #232323;
            border-collapse: collapse;
        }

        .table1,
        th,
        td {
            border: 1px solid #999;
            padding: 8px;
            width: 300px;
        }


        .judul {
            text-align: center;
            background-color: blue;
            color: #ffffff;

        }

    </style>
</head>

<body>
    <h2>Detail Data Lampiran Foto Jaminan BPKB dan Perikatan</h2>

    <table style="width: 100%;">
        <tr>
            <td class="judul" colspan="2">FOTO JAMINAN</td>
        </tr>
        <tr>
            <td colspan="2"><center>{{ $datafotobpkb->atasNama }}</center></td>
        </tr>
        <tr>
            <td colspan="2">
                <center>
                    {{ $datafotobpkb->noRekening }}
                </center>
            </td>
        </tr>

        <tr>
            <td>
                <center>
                    @if($datafotobpkb->pathJaminanAsli1 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathJaminanAsli1)}}">
                    @endif
                </center>
            </td>
            <td>
                <center>
                    @if($datafotobpkb->pathJaminanAsli2 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathJaminanAsli2)}}">
                    @endif
                </center>
            </td>
        </tr>
        <tr>
            <td>
                <center>
                    @if($datafotobpkb->pathJaminanAsli3 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathJaminanAsli3)}}">
                    @endif
                </center>
            </td>
            <td>
                <center>
                    @if($datafotobpkb->pathJaminanAsli4 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathJaminanAsli4)}}">
                    @endif
                </center>
            </td>
        </tr>
        <tr>
            <td>
                <center>
                    @if($datafotobpkb->pathJaminanAsli5 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathJaminanAsli5)}}">
                    @endif
                </center>
            </td>
            <td>
                <center>
                    @if($datafotobpkb->pathJaminanAsli6 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathJaminanAsli6)}}">
                    @endif
                </center>
            </td>
        </tr>

        <tr>
            <td colspan="2" rowspan="3">
                {{ $datafotobpkb->rincianAgunan }}
            </td>
        </tr>
    </table>

    <table style="width: 100%;">

        <tr>
            <td colspan="2" class="judul">
                <center>
                    FOTO PERIKATAN
                </center>
            </td>
        </tr>

        <tr>
            <td>
                <center>
                    @if($datafotobpkb->pathPerikatanAsli1 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathPerikatanAsli1)}}">
                    @endif
                </center>
            </td>
            <td>
                <center>
                    @if($datafotobpkb->pathPerikatanAsli2 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathPerikatanAsli2)}}">
                    @endif
                </center>
            </td>
        </tr>
        <tr>
            <td>
                <center>
                    @if($datafotobpkb->pathPerikatanAsli3 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathPerikatanAsli3)}}">
                    @endif
                </center>
            </td>
            <td>
                <center>
                    @if($datafotobpkb->pathPerikatanAsli4 !== null)
                        <img width="300" src="{{url($datafotobpkb->pathPerikatanAsli4)}}">
                    @endif
                </center>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                {{ $datafotobpkb->atasNama }}
            </td>
        </tr>

        <tr>
            <td colspan="2">
                {{ $datafotobpkb->noRekening }}
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Pokok Hutang:{{ $datafotobpkb->pokokHutang }} / Jangka Waktu : {{ $datafotobpkb->jangkaWaktu }} / Jasa :
                {{ $datafotobpkb->jasa }}
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Tanggal Perikatan:{{ $datafotobpkb->tglPerikatan }}
            </td>
        </tr>

    </table>

    </div>

</body>

</html>

And here's the controller function

public function cetak_pdf($id)
    {
        $datafotobpkb = Datafotobpkb::find($id);
        if($datafotobpkb === null)
        {
            abort(404);
        }
        $this->check_priviledge($datafotobpkb);

        $pdf = PDF::loadview('datafotobpkb.datafotobpkb_pdf',['datafotobpkb'=>$datafotobpkb]);
        // return $pdf->download('datafotobpkb-'.date('Y-m-d-h-i').'.pdf');
        return $pdf->stream('datafotobpkb-'.date('Y-m-d-h-i').'.pdf');

    }

Any idea how to fix this? Thanks in advance.

Upvotes: 3

Views: 9744

Answers (2)

Yohanes AI
Yohanes AI

Reputation: 3621

There were two options if you wanna still use same library Barryvdh\DomPDF\Facade::class . Tested and work well

For center-align, display-block solution

<p style="display: block; margin-left: auto; margin-right: auto; font-size: 16px; text-align: center;">
   ...
</p>

use floating

<div>
    <div style="float:left; font-size: 20px; font-weight: bold">
        ...
    </div>
    <div style="float:right; font-size: 20px; font-weight: bold">
        ...
    </div>
</div>

Upvotes: 1

victornoleto
victornoleto

Reputation: 1

I went through the same problem today. I resolved by updating the version from "barryvdh/laravel-dompdf": "^0.8.4", to "barryvdh/laravel-dompdf": "^0.8.5".

Upvotes: 0

Related Questions