I am using the Laravel Dompdf for converting my view to pdf . Everything is works properly before I add the image to the view . After retrieving an image its shows an error of:
Maximum execution time of 60 seconds exceeded
Here is my code
public function GeneratePDF($code)
{
# Retrieve Record for the select Beneficiaries
$beneficiary = Beneficiary::where('code', $code)->firstOrFail();
$mytime = Carbon::now();
$beneficiaryimage = $beneficiary->profile_photo;
$orgimage = $beneficiary->charitableOrganization->profile_photo;
// $familymember = BeneficiaryFamilyInfo::where('beneficiary_id',$beneficiary->id)->get();
if($beneficiary->charitable_organization_id == Auth::user()->charitable_organization_id)
{
// return view('charity.main.beneficiaries.BackupPdf', compact('beneficiary','mytime'));
$pdf = PDF::loadView('charity.main.beneficiaries.BackupPdf', compact('beneficiary','mytime','beneficiaryimage','orgimage'));
return $pdf->download($beneficiary->charitableOrganization->name.'-'.$beneficiary->last_name . ', ' . $beneficiary->first_name . '.pdf');
}
else
{
$toastr = array(
'message' => 'Users can only access their own charity records.',
'alert-type' => 'error'
);
return redirect()->back()->with($toastr);
}
}
My view Page
<!DOCTYPE html>
<html>
<head>
<title>Backup Beneficiary Data as PDF</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<style>
.tableinformation {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
border-style: none;
}
.tableinformation td
{
border:none;
outline:none;
}
.tableinformation :nth-child(odd) {
width: 40%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.organization {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.organization td
{
border:none;
outline:none;
}
.family
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.family th
{
text-align: center;
}
.family td
{
text-align: center;
}
.tableinformation2 {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
}
.tableinformation2 td ,th
{
border:none;
outline:none;
}
.prepareandnoted
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.prepareandnoted td
{
text-align: center ;
border:none;
outline:none;
}
.page-break {
page-break-after: always;
}
</style>
<body>
<table class="organization" >
<tr>
<td style="width:30%"><img src="{{ ($beneficiary->charitableOrganization->profile_photo)?url('upload/charitable_org/profile_photo/'.$beneficiary->charitableOrganization->profile_photo):url('upload/charitable_org/profile_photo/no_avatar.png') }}" alt="Charity Organization Profile Photo" width="100px" height="100px"></td>
<td style="text-align: center; font-size: 150%;">{{$beneficiary->charitableOrganization->name}}</td>
</tr>
</table>
<table class="organization">
<tr>
<td > Date: <span style="text-decoration:underline;">{{$mytime->isoFormat('MMMM d, YYYY')}}</span>
<br>
<span>Time: </span><span style="text-decoration:underline;">{{$mytime->format('g:i A');}}</span>
</td>
<td style="width:30%"><img src=" {{ ($beneficiary->profile_photo)?url('upload/charitable_org/beneficiary_photos/'. $beneficiary->profile_photo):url('upload/avatar_img/no_avatar.png') }}" alt="beneficiaries photo" width="150px" height="150px"></td>
</tr>
</table>
<table class="tableinformation">
<tr>
<th colspan="2">I. Identifying Information</th>
</tr>
<tr>
<td>Full name</td>
<td>{{$beneficiary->last_name. ', '.$beneficiary->first_name.' '. $beneficiary->middle_name}}</td>
</tr>
<tr>
<td>Nickname :</td>
<td>{{$beneficiary->nick_name}}</td>
</tr>
<tr>
<td>Date of Birth :</td>
<td>{{Carbon\Carbon::parse($beneficiary->brith_date)->isoFormat('MMMM d, YYYY')}}</td>
</tr>
<tr>
<td>Age During interview :</td>
<td>{{ Carbon\Carbon::parse($beneficiary->birth_date)->diff(Carbon\Carbon::parse($beneficiary->interviewed_at))->y }}
</td>
</tr>
<tr>
<td>Place of Birth :</td>
<td>{{$beneficiary->birth_place}}</td>
</tr>
<tr>
<td>Religion :</td>
<td>{{$beneficiary->religion}}</td>
</tr>
<tr>
<td>Present Address :</td>
<td>{{$beneficiary->presentAddress->region. ' '.$beneficiary->presentAddress->province
.' '.$beneficiary->presentAddress->city.' '.$beneficiary->presentAddress->barangay
.' '.$beneficiary->presentAddress->postal_code}}
</td>
</tr>
<tr>
<td>Permanent Address :</td>
<td>{{$beneficiary->permanentAddress->region. ' '.$beneficiary->permanentAddress->province
.' '.$beneficiary->permanentAddress->city.' '.$beneficiary->permanentAddress->barangay
.' '.$beneficiary->permanentAddress->postal_code}}
</td>
</tr>
<tr>
<td>Provincal Address :</td>
<td>{{$beneficiary->provincialAddress->region. ' '.$beneficiary->provincialAddress->province
.' '.$beneficiary->provincialAddress->city.' '.$beneficiary->provincialAddress->barangay
.' '.$beneficiary->provincialAddress->postal_code}}
</td>
</tr>
<tr>
<td>Educational Attainment :</td>
<td>{{$beneficiary->educational_attainment}}</td>
</tr>
<tr>
<td>Last School Attended :</td>
<td>{{$beneficiary->last_school_year_attended}}</td>
</tr>
<tr>
<td>Contact No. :</td>
<td>{{$beneficiary->contact_no}}</td>
</tr>
</table>
<table class="family">
<tr>
<th colspan="8" style="text-align: left;" >II. Family Composition</th>
</tr>
<tr>
<td>Name</td>
<td>Age</td>
<td>Relationship</td>
<td>Civil Status</td>
<td>Education</td>
<td>Occupation</td>
<td>Income</td>
<td>WhereAbout</td>
</tr>
#foreach ($beneficiary->families as $item)
<tr>
<td style="width: 20%">{{$item->last_name.', '.$item->first_name}}</td>
<td>{{Carbon\Carbon::parse($item->birth_date)->age;}}</td>
<td>{{$item->relationship}}</td>
<td>{{$item->civil_status}}</td>
<td>{{$item->education}}</td>
<td>{{$item->occupation}}</td>
<td>{{$item->income}}</td>
<td> {{ ($item->where_abouts)? $item->where_abouts:'---' }}</td>
</tr>
#endforeach
</table>
<table class="tableinformation2">
<tr>
<th >III. Presented Problem </th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->problem_presented}}
</td>
</tr>
<tr>
<th>IV. Background Information</th>
</tr>
<tr>
<th style=" padding-left: 8%;">
A. The Client
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_client}}
</td>
</tr style="margin-bottom:10px;">
<tr>
<th style=" padding-left: 8%;">
B. The Family
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_family}}
</td>
</tr>
<tr>
<th style=" padding-left: 8%;">
C. The Environment
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_community}}
</td>
</tr>
<tr>
<th>V. Assessment And Recommendation</th>
</tr>
<tr>
<td>
{{$beneficiary->bg_info->assessment}}
</td>
</tr>
</table>
<table class="prepareandnoted">
<tr >
<td>Prepared By</td>
<td>Noted By</td>
</tr>
<tr>
<td style="text-decoration: underline;">{{$beneficiary->prepared_by}}</td>
<td style="text-decoration: underline;">{{$beneficiary->noted_by}}</td>
</tr>
</table>
</body>
</html>
Ideally , I want to export the file within 5 seconds , is there a way to improve the speed? This is my first time to use something like this to convert pdf . Any answer are appreciated . Thankyou.
Related
I am generating a PDF using dompdf and one of the table cells is overflowing past the edge of the page. I am unable to find any reasoning for this as when displayed as a regular HTML page this doesn't happen. What potential workarounds might there be for this so the cell stays within the cell?
Code (contains Laravel blade syntax):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;700&display=swap" rel="stylesheet">
<style>
footer {
position: absolute;
bottom: 0px;
right: 0px;
}
body {
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
width: 100%;
}
.font-bold {
font-weight: bold;
}
.font-upper {
text-transform: uppercase;
}
.info-table-helper {
text-transform: uppercase;
font-weight: bold;
margin-right: 10px;
font-size: 12px;
width: 150px;
}
.alert {
padding: 20px;
background-color: #C55696;
color: white;
margin-bottom: 15px;
}
/* main table */
.main-table {
border-collapse: collapse;
border: 1px solid #000;
table-layout: fixed;
width: 100%;
}
.main-table th {
height: 40px;
}
.main-table td {
padding: 10px;
}
.main-table tbody {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.main-table tbody tr:nth-child(even) {
background-color: #f5f5f5;
}
.main-table thead {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<table style="width: 100%; margin-bottom: 20px">
<tr>
<td style="width: 50%">
<h1 class="font-upper">Banner Request</h1>
<p class="font-bold font-upper">** For internal use only **</p>
</td>
<td style="width: 50%">
<table class="info-table">
<tr>
<td class="info-table-helper">Client</td>
<td>{{ $projectRevision->project->client->name }}</td>
</tr>
<tr>
<td class="info-table-helper">Job code</td>
<td>{{ $projectRevision->project->job_code }}</td>
</tr>
<tr>
<td class="info-table-helper">Project name</td>
<td>{{ $projectRevision->project->name }}</td>
</tr>
<tr>
<td class="info-table-helper">Revision number</td>
<td>CR-{{ $projectRevision->revision }}</td>
</tr>
<tr>
<td class="info-table-helper">IO</td>
<td>{{ $io }}</td>
</tr>
</table>
</td>
</tr>
</table>
#if($groundTruth)
<div class="alert">
<strong>NOTE:</strong> Script URLs have been modified for GroundTruth.
</div>
#endif
<table class="main-table">
<thead>
<tr>
<th style="width: 20%">Description</th>
<th style="width: 30%">Click through URL with UTM</th>
<th style="width: 50%">Script</th>
</tr>
</thead>
<tbody>
#foreach ($banners as $attachment)
<tr>
<td>{{ $attachment->description }}</td>
<td>{{ $utm }}</td>
<td>{{ trim($attachment->content) }}</td>
</tr>
#endforeach
</tbody>
</table>
<footer style="font-family: 'Times New Roman'">
Generated {{ \Carbon\Carbon::now()->format('Y-m-d # g:i a') }} by {{ currentUser()->fullName }}
</footer>
</body>
</html>
Fixed with:
.main-table td {
white-space: pre-wrap;
word-wrap: break-word;
}
From: Word-wrap in an HTML table
Author: ßãlãjî
I am having issues with printing to snappyPDF, my tabble is misplaced, and is printing in the center vertical of page as shown below. Also, some borders are missing.
enter image description here
and here is my blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hasil Lab PDF</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
<style>
thead {
display: table-header-group
}
tfoot {
display: table-row-group
}
tr {
page-break-inside: avoid
}
.header-caption {
border-top: 4px double #000;
border-bottom: 3px double #000;
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.page {
overflow: hidden;
page-break-after: always;
}
.title {
font-style: italic;
margin-top: 1.5em;
}
.content {
font-size: 1.5em;
font-weight: bold;
}
.identity {
margin-top: 3em;
}
.info {
font-weight: bold;
}
.divider {
width: 2px;
}
.content-title {
font-weight: bold;
white-space: nowrap;
}
.header-content {
margin-top: 2em;
margin-bottom: 1em;
}
#tooth {
border-collapse: collapse;
}
#tooth tr td {
padding: 1em;
}
.list-legend {
margin-top: 1em;
}
.legend {
list-style: none;
}
.legend li {
float: left;
margin-right: 10px;
}
.legend span {
border: 1px solid #ccc;
float: left;
width: 12px;
height: 12px;
margin: 2px;
}
.legend .karies {
background-color: red;
border: none;
}
.legend .missing {
background-color: yellow;
border: none;
}
.legend .radix {
background-color: green;
border: none;
}
.legend .tambalan {
background-color: blue;
border: none;
}
.legend .prothese {
background-color: purple;
border: none;
}
.legend .kalkulus {
background-color: darkcyan;
border: none;
}
.tooth-karies {
background-color: red;
color: white;
}
.tooth-missing {
background-color: yellow;
color: black;
}
.tooth-radix {
background-color: green;
color: white;
}
.tooth-tambalan {
background-color: blue;
color: white;
}
.tooth-prothese {
background-color: purple;
color: white;
}
.tooth-kalkulus {
background-color: darkcyan;
color: white;
}
</style>
</head>
<body>
#if (isset($mcu_hasil_labs))
<div class="page">
<h1 class="text-center header-caption">HASIL LABORATORIUM</h1> <br>
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center; white-space: nowrap;">Test /
Jenis Pemeriksaan</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">Satuan Konvensional</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">International System</th>
</tr>
<tr>
<th style="text-align: center; white-space: nowrap;">Hasil</th>
<th style="text-align: center; white-space: nowrap;">Nilai Rujukan</th>
<th style="text-align: center; white-space: nowrap;">Result</th>
<th style="text-align: center; white-space: nowrap;">Reference</th>
</tr>
</thead>
<tbody>
#foreach ($mcu_hasil_labs_nmgroups as $header1)
<tr>
<td>{{ $header1 }}</td>
</tr>
#foreach ($mcu_hasil_labs_nmtestawals as $header2)
#if ($header2['nmgroup']==$header1)
#if ($header2['nmtestawal']!=$header2['nmtest'])
<tr>
<td>{!! " " !!}
{{ $header2['nmtestawal'] }}
</td>
</tr>
#endif
#foreach ($mcu_hasil_labs_nmtests as $header3)
#if ($header3['nmtestawal']==$header2['nmtestawal'])
#if ($header3['nmtest']!=$header3['nmfraction'])
<tr>
<td>{!! " " !!}
{!! " " !!}
{{ $header3['nmtest'] }}
</td>
</tr>
#endif
#foreach ($mcu_hasil_labs as $hasil_lab)
#if ($hasil_lab['nmtest']==$header3['nmtest'])
<tr>
<td>{!! " " !!}
{!! " " !!}
{!! " " !!}
{{ $hasil_lab['nmfraction'] }}</td>
<td >{{ $hasil_lab['cHasil'] }}</td>
<td>{{ $hasil_lab['nilaistd'] }}</td><br>
</tr>
#endif
#endforeach
#endif
#endforeach
#endif
#endforeach
#endforeach
</tbody>
</table>
<div class="card-body">
<br><br><br><br>
<p class="text-left">{{ "Catatan:" }}</p>
<p class="text-center">{{ "Pemeriksa" }}</p>
</div>
</div>
#endif
</body>
</html>
I've tried to remove the head, but it is still printed in the middle of the page.
Does anyone have any idea why there is a big gap between the header and the table? Also, how come some of my borders are missing?
i found error root cause which is in the tbody, here's working code
<body>
#if (isset($mcu_hasil_labs))
<div class="page">
<h1 class="text-center header-caption">HASIL LABORATORIUM</h1>
<br>
No.LAB : {{$mcu_hasil_labs[0]['nolab']}}
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center; white-space: nowrap;">Test /
Jenis Pemeriksaan</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">Satuan Konvensional</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">International System</th>
</tr>
<tr>
<th style="text-align: center; white-space: nowrap;">Hasil</th>
<th style="text-align: center; white-space: nowrap;">Nilai Rujukan</th>
<th style="text-align: center; white-space: nowrap;">Result</th>
<th style="text-align: center; white-space: nowrap;">Reference</th>
</tr>
</thead>
<tbody>
#foreach ($mcu_hasil_labs_nmgroups as $header1)
<tr>
<td colspan="5">{{ $header1 }}</td>
</tr>
#foreach ($mcu_hasil_labs_nmtestawals as $header2)
#if ($header2['nmgroup']==$header1)
#if ($header2['nmtestawal']!=$header2['nmtest'])
<tr>
<td colspan="5">{!! " " !!}
{{ $header2['nmtestawal'] }}
</td>
</tr>
#endif
#foreach ($mcu_hasil_labs_nmtests as $header3)
#if ($header3['nmtestawal']==$header2['nmtestawal'])
#if ($header3['nmtest']!=$header3['nmfraction'])
<tr>
<td colspan="5">{!! " " !!}
{!! " " !!}
{{ $header3['nmtest'] }}
</td>
</tr>
#endif
#foreach ($mcu_hasil_labs as $hasil_lab)
#if ($hasil_lab['nmtest']==$header3['nmtest'])
<tr>
<td>{!! " " !!}
{!! " " !!}
{!! " " !!}
{{ $hasil_lab['nmfraction'] }}</td>
<td>{{ $hasil_lab['cHasil'] }}</td>
<td>{{ $hasil_lab['nilaistd'] }}</td>
<td> </td>
<td> </td>
</tr>
#endif
#endforeach
#endif
#endforeach
#endif
#endforeach
#endforeach
</tbody>
</table>
<div class="card-body">
<br>
<hr>
<p class="text-left">{{ "Catatan:" }}</p>
<table>
<tr>
<td style="width: 700px;">
</td>
<td>
{{ "Pemeriksa," }}
</td>
</tr>
</table>
</div>
</div>
#endif
hope this helps others
cheers
When I insert the HTML file into outlook and then view it, it looks all stretched vertically, but when viewing it on the browser it looks perfect.
When I view the email signature in the outlook "Signatures and Stationary" window it also looks right but when inserting it into the body of the email message it gets stretched.
Taken all the height property out of HTML code.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wagma E-Signature</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600,700,800,900" />
<style type="text/css">
/* Client-Specific styles */
#outlook a { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */
body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass { width:100%; } /* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/
img { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
a img { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
p { margin:0px 0px !important; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table td { border-collapse:collapse; }
/* iPad Styles */
#media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration:none;
color:#000000;
pointer-events:none;
cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration:default;
color:#000000 !important;
pointer-events:auto;
cursor:default;
}
}
/* iPhone Styles */
#media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration:none;
color:#000000;
pointer-events:none;
cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration:default;
color:#000000 !important;
pointer-events:auto;
cursor:default;
}
}
/* Responsive styles */
#media only screen and (max-width: 480px) {
td[class=wrapper] {
padding-top:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}
table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] {
width:320px !important;
height:auto !important;
}
td[class=clump] {
display:block !important;
padding-left:0 !important;
padding-right:0 !important;
width:100% !important;
}
td[class=aligncenter] {
width:300px !important;
height:auto !important;
text-align:center !important;
}
}
</style>
</head>
<body>
<table width="490" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td>
<table width="490" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="130" align="left" valign="top" class="clump" style="padding:0 0 10px 0; background:#eff1f6;">
<!-- Add your Avatar -->
<img src="image/LOGO-WAGMA 320 X 320.png" alt="Avatar" border="0" width="120" style="padding:10px 0 0 10px; display:block; border:0; outline:none;" />
</td>
<td width="360" align="left" valign="top" class="clump" style="padding:10px 0 0 0; background:#eff1f6;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td style="padding:0 10px 0 15px;" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<!-- Edit your Name or Title -->
<td style="font-family:'Raleway', sans-serif, Arial; font-size:18px; line-height:24px; font-weight:900; color:#2f3542; padding:10px 0 0 0;">Andrew Magombedze</td>
</tr>
<tr>
<!-- Edit your job title or subtitle -->
<td style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:18px; font-weight:500; color:#6e7482; padding:0 0 10px 0;">SHEQ Consultant</td>
</tr>
<!-- Edit your job title or subtitle -->
<tr>
<td style="font-family:'Raleway', sans-serif, Arial; font-size:10px; line-height:12px; font-weight:400; color:#6e7482; padding:0 0 10px 0;">Bsc (Hons) Enviro, SAMTRAC<br>ISO 14001, 18001 Implementation<br>ISO 14001, 18001 Internal Auditor<br>Sacpcmp - CanCHSM</td>
</tr>
<tr>
<!-- Edit your Address -->
<td style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:18px; font-weight:600; color:#2f3542; padding:5px 0 0 0;">Office 192 Woodlands Gardens, 92 Bellairs Drive, Northriding, Randburg</td>
</tr>
<tr>
<!-- Edit your website's URL -->
<td style="font-family:'Raleway', sans-serif, Arial; font-size:16px; line-height:30px; font-weight:800; color:#60d853; padding:0 0 10px 0;">Wagma-SHEQ.co.za</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="490" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="63%" style="padding:12px 0 5px 10px; background:#e1e4ed;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="50%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="25" valign="top"><img src="image/icon_green_phone.png" alt="Phone" border="0" width="22" style="display:block; border:0; outline:none;" /></td>
<!-- Edit your Phone number -->
<td width="" valign="top" align="left" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;"> +27 78 762 7712</td>
</tr>
</tbody>
</table>
</td>
<td width="50%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="25" valign="top"><img src="image/icon_green_email.png" alt="Email" border="0" width="22" style="display:block; border:0; outline:none;" /></td>
<!-- Edit your Email address -->
<td width="" valign="top" align="left" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;">andrewm#wagma-sheq.co.za</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
It looks like you need to specify your height attribute too on the images.
So for example instead of this:
<img src="image/LOGO-WAGMA 320 X 320.png" alt="Avatar" border="0" width="120"
style="padding:10px 0 0 10px; display:block; border:0; outline:none;" />
Try:
<img src="image/LOGO-WAGMA 320 X 320.png" alt="Avatar" border="0" width="120"
height="120" style="padding:10px 0 0 10px; display:block; border:0; outline:none;" />
If you need to cater for mobile responsiveness, you treat the width and height attributes as default (for Outlook), and an inline style for everything else:
<img src="image/LOGO-WAGMA 320 X 320.png" alt="Avatar" border="0" width="120"
height="120" style="width:120px;height:auto;max-width:120px; padding:10px 0 0 10px; display:block; border:0; outline:none;" />
I have a web version that's displaying fine. When I send a test email, it shows unwanted spacing between the images. I tried changing the the padding and margin , but nothing's working. Why is it doing that?
https://jsfiddle.net/tantalizea/r49oqbjj/
CSS:
a,
body,
div,
img,
span,
table,
td,
tr {
margin: 0;
padding: 0;
border: 0;
}
a {
color: #231F20;
font-weight: bold;
text-decoration: none
}
a[href^="x-apple-data-detectors:"] {
color: inherit;
text-decoration: inherit;
}
area {
outline: none
}
body {
font: normal 100% Arial, Helvetica, sans-serif;
background: #FFF;
color: #231F20
}
img {
border: none;
width: 100%;
height: auto
}
.container {
width: 600px;
margin: 0 auto;
max-width: 600px
}
#preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: #FFFFFF;
color: transparent;
height: 0;
width: 0;
font-size: 0px
}
.desktop {
display: table !important;
margin: 0 auto !important;
}
tr.desktop {
display: table-row !important
}
td.desktop {
display: table-cell !important
}
img.desktop {
display: inline !important
}
.mobile {
display: none !important
}
.break {
display: inline !important
}
#media screen and (max-width: 600px) {
.container {
width: 97.5%
}
.desktop,
tr.desktop,
td.desktop,
img.desktop {
display: none !important
}
.mobile {
display: table !important
}
tr.mobile {
display: table-row !important
}
td.mobile2 {
display: table !important;
width: 100%;
text-align: center !important
}
td.mobile {
display: table-cell !important
}
.break {
display: none !important
}
.hidden {
display: none !important
}
.no-border {
border: none !important
}
.smaller {
font-size: 200% !important
}
.smaller2 {
font-size: 100% !important
}
.center {
text-align: center !important
}
.margin {
margin: 0 auto
}
.image {
width: 100px !important
}
.width-100 {
width: 100% !important
}
}
HTML:
<body style="background:#FFF; color:#858585">
<div id="preheader" style="display:none; visibility:hidden; opacity:0; color:#878787; color:transparent; height:0; width:0; font-size:0px;">Tuesday, March 7, 2017 | 9840 International Drive, Orlando, Florida | Booth #613</div>
<!-- /div#preheader -->
<div class="container" style="margin:0 auto; max-width:600px">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="container" style="margin:0 auto; max-width:600px">
<tr class="bronto">
<td height="20"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Is this email not displaying correctly? Try the web version.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td width="35" class="desktop"> </td>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="bottom" width="76%"><span style="font:normal 300% Times, 'Times New Roman', serif; color:#56565a; line-height:100%" class="smaller"><strong><em>You're Invited!</em></strong></span></td>
<td style="text-align:right" width="24%"><img src="http://www.kravetcontract.com/email_blasts/tipin.png" alt="KK" style="max-width:144px; width:100%" /></td>
</tr>
</table>
</td>
<td width="35" class="desktop"> </td>
</tr>
<!--<tr class="mobile">
<td class="mobile">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%" class="mobile">
<tr class="mobile">
<td height="20" class="mobile"></td>
</tr>
<tr class="mobile">
<td align="center" class="mobile"><span style="font:normal 200% Times, 'Times New Roman', serif; color:#57565b;" class="mobile"><strong><em>You're Invited!</em></strong></span></td>
</tr>
</table>
</td>
</tr>-->
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/top.jpg" alt="Top" style="max-width:600px" /></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/left.jpg" alt="Left" style="max-width:78px" /></td>
<td align="center" valign="middle" bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="20" align="center" border="0" width="100%">
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1px">PLEASE JOIN</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/BDNY2016/logo.png" alt="kravetcontract" style="max-width:280px" /></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">AT THIS YEAR'S</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/newh_logo_2.png" alt="NEWH" style="max-width:192px" /></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011;letter-spacing:1.5px">MARCH 7, 2017 AT 12PM-6PM<br />
BOOTH #613</span></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 81.25% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">9840 International Drive<br />
Orlando, Florida</span></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; line-height:21px; letter-spacing:1.5px">We look forward to seeing you.</span></td>
</tr>
</table>
</td>
<td align="right" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/right.jpg" alt="Right" style="max-width:78px" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px" /></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#56565a">
<table cellpadding="0" cellspacing="5" align="center" border="0">
<tr>
<td bgcolor="#56565a">GET DIRECTIONS <strong style="font-family:Arial, sans-serif;">►</strong></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td><img src="http://www.kravet.com/style-spotlight/one-family.gif" alt="One Family. Ninety-Eight Years." border="0" style="border:none; width:100%" /></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 150% Helvetica, Arial, sans-serif; color:#858585"><span style="font:normal 87.5%/4mm Helvetica, Arial, sans-serif; color:#858585">#</span>kravetinc</span>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td>
<img src="http://www.kravet.com/style-spotlight/instagram.gif" alt="Instagram" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/facebook.gif" alt="Facebook" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/pinterest.gif" alt="Pinterest" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/twitter.gif" alt="Twitter" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/houzz.gif" alt="Houzz" border="0" style="border:none; width:100%; max-width:50px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">e-designtrade.com</td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 75% Helvetica, Arial, sans-serif; color:#858585">KRAVET® INC | CONTACT US | PRIVACY POLICY</span></td>
</tr>
<tr>
<td align="center"><span style="font:bold 75% Helvetica, Arial, sans-serif; color:#858585">Exclusively Available Through Interior Designers</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">This email was sent to %%!contact_email%% by %%!account_organization%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">%%!account_address1%% | %%!account_city%%, %%!account_state%% %%!account_zip%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Forward to a friend | Manage Preferences | Unsubscribe</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
<!-- /table.container -->
</div>
<!-- /div.container -->
</body>
Try using display block on all images.
style="display:block;"
This is a must have on all images.
Cheers
To be quite honest, I actually love the way it looks haha.
But I believe your issue is the img. It's based on the width. The aspect ratio makes the height smaller then the size of the table row. This is probably not the best way to fix it, but after going through a bunch of css changes I couldn't get it to work any other way:
On the specific images. Set the img style to be moved 4 px down:
transform: translateY(4px);
Bottom image, 4 px up:
transform: translateY(-4px);
Ex:
Bottom:
<img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px;transform: translateY(-4px);">
Should look like this:
I'm trying to create table with three equal columns
Table width is set to 100%
When I'm trying to set width: 33% on TABLE TD element dompdf generates 1+ blank page(s) before generates the table. The table generates as expected only those blank pages are present in pdf document.
PDF FILE with width: 33%: http://www.docdroid.net/b5cf/with-width.pdf.html
I need to have equal columns on this table and cant achive it with width="33%" or style="table-layout: fixed" without geting the blank pages befor the table.
The HTML looks like this
<table class="outer_tab">
<tbody>
<tr class="outer_tr">
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">I.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">II.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">III.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS looks like this:
<style type="text/css">
#page { margin: 1cm; }
body {
background-image: url('<?php echo 'module/Application/assets/pdf/images/faktury-tlo-small.png'; ?>');
background-repeat: no-repeat;
background-size: 20%;
background-position: center center;
}
table.outer_tab, table.inner_tab { border-spacing: 0; width: 100% }
table.inner_tab th { text-align: center; background: #BDC0BF; font-size: 15px; font-weight: bold; padding: 2px 0; }
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
td.outer_td:last-of-type { border-right: 1px solid #BDC0BF; }
tr.outer_tr:last-of-type td.outer_td { border-bottom: 1px solid #BDC0BF; }
span.lp { padding-left: 10px; display: block; }
span.inner_td_text { /*padding-right: 10px;*/ }
span.separator { font-weight: bold; text-align: center; font-size: 15px; padding-bottom: 10px; display: block; }
.footer { position: fixed; bottom: 0px; width: 100%; font-size: 11px; }
</style>
The line cosing problems is:
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
If in this td.outer_td has width: 33% the PDF has blank pages before the table
Anyone has any idea why this is happening?
Any solutions to this problem?