CODEWITHSUNDEEP
phplaraveldompdf
Servet Tunçel
Servet Tunçel

Reputation: 51

laravel-dompdf | Display divs as column like flex

I'm creating the layout for export meeting details in PDF. there is a problem during layout. I want to display divs as a column. for example image display: flex not working, I'm trying table, table-cell, table-flex and table-grid but not working. Main content shifts down sidebar length.

My all blade html codes;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,500,700&display=swap" rel="stylesheet">
    <style media="screen">
        @font-face {font-family: "Roboto-Light"; font-style: normal; font-weight: 300; src: url({{ url('fonts/Roboto-Light.ttf') }})}
        @font-face {font-family: "Roboto-Regular"; font-style: normal; font-weight: normal; src: url({{ url('fonts/Roboto-Regular.ttf') }})}
        @font-face {font-family: "Roboto-Bold"; font-style: normal; font-weight: bold; src: url({{ url('fonts/Roboto-Bold.ttf') }})}

        body { font-family: 'Roboto-Regular'; }
        * { margin: 0; padding: 0; }

        .sidebar {
            position: relative;
            left: 0.9cm;
            width: 5cm;
        }

        .page-break-after {
            page-break-after: auto;
        }

        body {
            padding-top: 3cm;
            padding-bottom: 100px;
        }

        .wrapper {
            position:relative;
            width: 21cm;
            display: table;
        }
    </style>
</head>
<body style="background: url({{ url('pdf-export-background.png') }});background-size: 100% 100%;">

    <div class="wrapper">
        <div class="sidebar" style="">
            <p style="text-align:center;font-size:8px;">{{ $meeting['place'] }}</p>

            <!-- List Item -->
            <p style="margin-top: 15px;">
                <h4 style="margin-left:5%;font-family:'Roboto-Bold' !important;font-size:10px;">
                    <span style="border-bottom: 1px solid #000;">Düzenleyen</span>
                </h4>
                <p style="padding-left: 5%;">
                    <span style="font-size:9px;">{{ $meeting['created_user']['name'] }}</span>
                    <span style="font-size:7px;font-weight:300;line-height:9px;">{{ $meeting['job_title_name'] }}</span>
                </p>
            </p>
            <!--#List Item -->

        </div>

        <div style="position: relative;width: 5.7cm;">
            THE MAIN CONTENT
        </div>
    </div>
</body>
</html>

Upvotes: 3

Views: 27387

Answers (2)

Sacha Durand
Sacha Durand

Reputation: 590

Normally, using CSS table property working with this library

Upvotes: 0

BrianS
BrianS

Reputation: 13914

Dompdf does not support flexbox as of this writing (current release is 0.8.4). Refer to issue 971 for more information.

You can generate that layout with a variety of stylings, but if your content goes beyond a page in length you'll run into some quirkiness around the Dompdf rendering process. I'd suggest floating the sidebar to the left and set a left margin on the main content.

Something like this:

<div>
  <div style="float: left; width: 25%; height: 80%; background-color: #cc6633;"></div>
  <div style="margin-left: 35%; width: 65%; height: 80%; background-color: #3366cc;"></div>
</div>

Upvotes: 12

Related Questions