php Question posted in
Official manual can be found here.

Problem with dividing pdf page into two in php using dompdf

The following code is from my resume.php file. I have tried to divide the page into two blocks each represented using (.left) and (.right) class. Content on left block is being displayed but on the right side, whatever I write moves to the next page.

<?php

// get all the data
$firstname = $_POST['firstname'];
$middlename = $_POST['middlename'] == null ? "" : $_POST['middlename'];
$lastname = $_POST['lastname'];
$designation = $_POST['designation'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$address = $_POST['address'];
$summary = $_POST['summary'];

//get skills
$skills = $_POST['skills']; 

require_once('./dompdf/autoload.inc.php');      

use DompdfDompdf;

// instantiate and use the dompdf class
$dompdf = new Dompdf();
$dompdf->loadHtml('hello world');



// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'portrait');

$html = "
<html>
<head>
        <style>
                body{
                        font-family: 'Arial', sans-serif;
                }
                .left{
                        background-color: rgb(7,72,70);
                        height:100%;
                        width: 40%;
                        color:white;
                }
                .right{
                        width:60%;
                }
                .image-container{
                        width:2.5in;
                        height:2.5in;
                        background-color:red;
                }
                .name{
                      width:100%;
                      height:0.5in;
                      font-style:bold;
                      font-size: 0.208in;
                      text-align:center;
                }
                .horizontal-line{
                        height:0.0208in;
                        width:60%;
                        margin-left:auto;
                        margin-right:auto;
                        color:white;
                }
                .designation{
                        text-align:center;
                }
                .phone, .email, .address, .about{
                        margin:0.1in;
                }
                .left-heading{
                        margin-left:0.2in;
                        font-style:bold;
                        margin-top:0.2in;
                        margin-bottom:0.2in;
                }
                .left-sub-section{
                        margin-left:0.2in;
                        margin-right:0.2in;
                }
                .right-heading{
                        margin-left:0.3in;
                        margin-bottom:0.2in;
                        margin-top:0.5in;
                }
        </style>
</head>
<body>
        <div class='container'>
                <div class='left'>
                        <div class='image-container'>

                        </div>
                        <div class='name'>
                                $firstname $middlename $lastname
                        </div>
                        <div class='horizontal-line'>
                        </div>
                        <div class='designation'>
                                $designation
                        </div>

                        <div class='left-heading'> 
                                About 
                        </div>
                        <div class='left-sub-section'>
                                <div class='phone'>$phone</div>
                                <div class='email'>$email</div>
                                <div class='address'>$address</div>
                                <div class='about'>$summary</div>
                        </div>

                        <div class='left-heading'> Skills </div>
                        <div class='left-sub-section'> ";

foreach ($skills as $skill){
        $html .= "<div style='margin:0.1in;'> $skill</div>";
}
                                

$html .= "</div>
                </div>
                <div class='right'>
                        <div class='ahivements-section'>
                                <div class='right-heading'>
                                        ACHIEVEMENT
                                </div>
                        </div>
                </div>
        </div>
</body>
</html>";

$dompdf->loadHtml($html);

// Render the HTML as PDF
$dompdf->render();

header('Content-Type: application/pdf');
header('Content-Disposition: inline; filename="output.pdf"'); // Set filename as "output.pdf" and specify inline disposition

// Output the generated PDF to Browser
$dompdf->stream(null, ['Attachment' => 0]);

I want to get the ACHIEVEMENT section on the right side of the same page.

Tags:

2

Answers


  1. 0

    Use display:inline-block for .left and .right, so that they can be displayed next to each other, and maybe decrease their width a little bit so that it doesn’t add up to exactly 100%, but a little less, plus also maybe use box-sizing: border-box on them to include all borders and paddings in those percentage width values. (Use trial and error to find out which percentage values work)

    (I am not sure about the current state, but at least older versions of dompdf couldn’t handle flex, which would be the ideal solution – therefore my suggestion of inline-blocks)

    Login or Signup to reply.
  2. 0

    I remember struggling with that problem when working with dompdf.
    You can try to change your "right" and "left" classes to this:

    .left{
    background-color: rgb(7,72,70);
    color:white;
    top: 0px; 
    left: 0px; 
    position: absolute; 
    width: 40%; 
    height:100%;
}
.right{
    top: 0px; 
    right: 0px; 
    position: absolute; 
    width: 60%;
    height:100%;
}

    PD: Sorry for my english

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search