Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incorrect vertical alignment of elements within line box #2937

Open
insurgentnl opened this issue Jun 28, 2022 · 3 comments · May be fixed by #2762
Open

Incorrect vertical alignment of elements within line box #2937

insurgentnl opened this issue Jun 28, 2022 · 3 comments · May be fixed by #2762
Labels
layout
Milestone
3.1.0

Comments

@insurgentnl
Copy link

insurgentnl commented Jun 28, 2022 •
edited by bsweeney

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:
KFzn1

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();

original: https://stackoverflow.com/q/72772559/264628
@bsweeney
Copy link
Member

This is an issue we're attempting to address with #2762. Rendering with that update is significantly improved, but there are still some alignment issues we need to address so it is not quite ready for production use. I'm hopeful to have that update ready for the next release.

@bsweeney
Copy link
Member

Also, while I appreciate you not wanting to duplicate your post it's better to post the full explanation here. I've updated your post.

@bsweeney bsweeney linked a pull request Jun 28, 2022 that will close this issue
Improve vertical alignment and related adjustments #2762
Open
@bsweeney bsweeney changed the title Wrong position of images with position absolute or negative margin Incorrect vertical alignment of elements within line box Jun 28, 2022
@bsweeney
Copy link
Member

FYI 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.

<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>

@bsweeney bsweeney added this to the 2.0.2 milestone Aug 25, 2022
@bsweeney bsweeney modified the milestones: 2.0.2, 2.0.3 Dec 29, 2022
@bsweeney bsweeney modified the milestones: 3.0.1, 3.1.0 May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
layout
Projects
None yet
Milestone
3.1.0
Development

Successfully merging a pull request may close this issue.

Improve vertical alignment and related adjustments dompdf/dompdf
2 participants
@bsweeney @insurgentnl