CODEWITHSUNDEEP
dompdf
InsurgentNL
InsurgentNL

Reputation: 11

Dompdf image position incorrect

I have an issue with Dompdf not positioning images correct. The output in browser is ok, but the images are to close to the title in the PDF.

They should also render over the blue bar. I thought this should be possible with either a negative margin-top or a position absolute. But from what I read is that position:absolute inside a position:relative container is (still) not working.

HTML and expected output:

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
    @page { margin: 0px; }
    body
    {
        font-family: 'Lato';
        font-size: 13px;
        margin: 0px;
        padding: 0px;
    }
    .container
    {
        padding: 0px 30px;
    }
    .top_container
    {
        position: relative;
    }
    .subgroep
    {
        color: #2e4660;
        font-weight: 700;
        padding-top: 30px;
    }
    .top_container .balk_blauw
    {
        /*position: absolute;*/
        /*bottom: 0px;*/
        /*left: 0px;*/
        height: 60px;
        width: 100%;
        background: #2e4660;
        margin-top: -60px;
    }
    .top_container .images
    {
        position: relative;
        z-index: 99;
    }
    .top_container .images img
    {
        width: 230px;
        margin-top:20px;
    }
    
</style>
</head>
<body>
<div class="top_container">
    <div class="container">
        <div class="subgroep">Wijnklimaatkast</div>
            <div class="images">
            <img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
            <img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
            </div>
    </div>
    <div class="balk_blauw"></div>
</div>
</body></html>

PDF renders as follows: Screenshot

PHP Code:

$dompdf_options = new \Dompdf\Options();
$dompdf_options->set('isRemoteEnabled', true);
$dompdf_options->set('chroot', $dirname);

$dompdf = new \Dompdf\Dompdf($dompdf_options);
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream();

Upvotes: 0

Views: 1752

Answers (1)

BrianS
BrianS

Reputation: 13914

This is an issue with how Dompdf aligns element within a line box. There is an ongoing effort to address the issue (WIP).

With the current release you can work around the issue by moving your image block down using relative positioning. You'll also want to set z-indexing a bit differently to better accommodate how Dompdf renders elements.

Try the following:

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
    @page { margin: 0px; }
    body
    {
        font-family: 'Lato';
        font-size: 13px;
        margin: 0px;
        padding: 0px;
    }
    .container
    {
        padding: 0px 30px;
        z-index: 99;
    }
    .top_container
    {
        position: relative;
    }
    .subgroep
    {
        color: #2e4660;
        font-weight: 700;
        padding-top: 30px;
    }
    .top_container .balk_blauw
    {
        /*position: absolute;*/
        /*bottom: 0px;*/
        /*left: 0px;*/
        height: 60px;
        width: 100%;
        background: #2e4660;
        margin-top: -60px;
    }
    .top_container .images
    {
        position: relative;
        top: 40px;
        z-index: 99;
    }
    .top_container .images img
    {
        width: 230px;
        margin-top:20px;
    }
    
</style>
</head>
<body>
<div class="top_container">
    <div class="container">
        <div class="subgroep">Wijnklimaatkast</div>
            <div class="images">
            <img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
            <img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
            </div>
    </div>
    <div class="balk_blauw"></div>
</div>
</body></html>

Follow your issue for updates

Upvotes: 1

Related Questions