CODEWITHSUNDEEP
laravelpdflaravel-5dompdf
Abdo Abo
Abdo Abo

Reputation: 93

Laravel and barryvdh/laravel-dompdf (html not displaying correctly in Pdf )

I need to create like this model in PDF :

Label a4/8

In html works great like this : enter image description here

But when i loaded to pdf(barryvdh dompdf) I got this result? i'don't know why some content changes his place

enter image description here

This my html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
table{
  width: 100%;
}
table tr td{
  text-align: left;
  border:1px solid;
  display: inline-block;
  width: 45%;
  height:150px;
  margin-top: 2px;
}

</style>
</head>
<body>
<table>
    
  <tr>
        @foreach($colisenattent as $coli)  
        <td>
            {{$coli->data}}
        </td>
        @endforeach
  </tr>

</table>

</body>
</html>

Upvotes: 1

Views: 2259

Answers (2)

bhucho
bhucho

Reputation: 3420

The issue lied in your css, At first glance though it looks ok.
At first display: inline-block; this css breaks the dompdf code so you will end up in some dompdf error,

Dompdf\Exception The row #1 could not be found, please file an issue in the tracker with the HTML code

So you need to remove that.
use vertical-align: top; instead.
I have added my own styling as well to make it close to ideal.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="all">
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px 0px 1px 0px;
 
}

th, td{
  text-align: left;
  vertical-align: top;
  border: 3px solid;
  border-radius: 5px;
  width: 45%;
  height: 150px;
  margin: 2px 2px 2px 2px;
  padding: 2px 2px 2px 2px;
} 

</style>
</head>
<body>
<table>
    <thead>
        <tr>
            <td>Text Text</td>
            <td>Text Text</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Text Text</td>
            <td>Text Text</td>
        </tr>
        <tr>
            <td>Text Text</td>
            <td>Text Text</td>
        </tr>
    </tbody>
</table>
</body>
</html>

DEMO Image

enter image description here

Upvotes: 1

brice
brice

Reputation: 1881

The HTML is currently creating a single row with n columns. Do you instead want to create n/2 rows with two columns?

If so, try something like this:

<table>
    @for($i = 0; $i < count($colisenattent); $i += 2)
        <tr>
            <td>
                {{ $colisenattent[$i]->data }}
            </td>
            <td>
                @if (isset($colisenattent[$i + 1]))
                    {{ $colisenattent[$i + 1]->data }}
                @endif
            </td>
        </tr>
    @endfor
</table>

Upvotes: 1

Related Questions