PHP Dompdf : Incorrect item location

1 year ago

#377127

Mitsukk

I use Dompdf to generate a pdf from an html.

Before using the Dompdf library, I built the html to have a preview directly on my browser.

Here is the result when I read html via my browser:

The problem is related to Dompdf. The result is not the same as on my browser:

As you can see, the elements are not placed correctly:

I need the logo and the term "RELEVE DE COMPTE" on the same line. The logo on the left and, "Statement of Account" in the middle.
The same goes for the company’s information. In the pdf, it’s at the bottom.

My Dompdf function:

public function render(string $html)
{
    $pdf = new Dompdf();
    $pdf->loadHtml($html);
    $pdf->setPaper('A3');
    $pdf->render();
    $pdf->stream();
}

My html/css code:

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

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Statement</title>
    <style type="text/css">
        body {
            background-size: 100% 100%;
            padding: 50px;
            font-family: -webkit-pictograph, 'Roboto', sans-serif;
        }

        .header {
            display: flex;
            flex-direction: row;
        }

        .header-logo {
            width: 30%;
        }

        .header-title {
            width: 30%;
            text-align: center;
        }

        .header-baseline {
            color: #3E5064;
        }

        .spacer {
            width: 100%;
            border-bottom: solid 1px #E5E5E5;
            margin: 1em;
        }

        .infos {
            display: flex;
            flex-direction: row;
            margin-bottom: 8em;
        }

        .infos > div > div > p {
            margin: 0;
        }

        .infos > div > div > h3 {
            margin: 0;
            margin-top: 1em;
            margin-bottom: 0.3em;
        }

        .user-info {
            width: 50%;
            text-align: left;
        }

        .agent-info {
            width: 50%;
            text-align: right;
        }

        .statement-first-balance {
            display: flex;
            flex-direction: row;
        }

        .statement-first-balance-period {
            width: 50%;
            text-align: left;
        }

        .statement-first-balance-amount {
            width: 50%;
            text-align: right;
        }

        .statement-operations {
            margin-bottom: 10px;
            width: 100%;
            height: auto;
        }

        .statement-operations-debit {
            text-align: right;
        }

        .statement-operations-credit {
            text-align: right;
        }

        table {
            border-spacing: 0;
        }

        table > thead > tr {
            height: 3em;
            background-color: #F7F9FF;
        }

        table > thead > tr > th {
            text-align: left;
            padding: 1em;
        }

        table > tbody > tr {
            height: 3em;
        }

        .statement-recap {
            display: flex;
            flex-direction: row;
        }

        .statement-recap-amount {
            width: 40%;
            margin-left: 60%;
        }

    </style>
    <link
        href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900'
        rel='stylesheet' type='text/css'/>
</head>

<body>
<div class="header">
    <div class="header-logo">
        <img alt="agent-logo" class="agent-image"
             src=""
             width="70%">
        <span class="agent-name"></span>
    </div>
    <div class="header-title">
        <h1>RELEVE DE COMPTE</h1>
        <p class="header-baseline">Compte - en euros</p>
    </div>
    <div class="header-page"></div>
</div>

<div class="spacer"></div>

<div class="infos">
    <div class="user-info">
        <div>
            <h3>firstName lastName</h3>
            <p>test address</p>
            <p>11111 Town</p>
        </div>
        <div>
            <h3>IBAN</h3>
            <p>AA1111111111111111111111111</p>
        </div>
        <div>
            <h3>BIC</h3>
            <p>AZERTYUIOPQ</p>
        </div>

    </div>
    <div class="agent-info">
        <div>
            <h3>Company</h3>
            <p>Company address</p>
            <p>11111 Town</p>
        </div>
    </div>
</div>

<div class="statement-first-balance">
    <div class="statement-first-balance-period">
        <p>du 2022-02-04 au 2022-02-27</p>
    </div>
    <div class="statement-first-balance-amount">
        <p>Votre précédent solde</p>
        <h3>216.25 €</h3>
    </div>
</div>


</body>
</html>

I don’t understand why rendering from the browser is OK but the PDF is not OK. Could you please help me?

php

html

css

dompdf

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs