I am using barryvdh/laravel-dompdf version 0.8.4 in Laravel 5 to create a PDF from a view. Before i do composer update, the pdf working just fine, but now its showing up like this
It was supposed to be like this
This is the view for the black part
<table class="header" style="table-layout:fixed;width:100%;background-color:none;border-collapse: collapse;">
<thead>
<tr width="100%"><th>
<div style="font-weight:200;font-size:16px;margin-top:10px;text-align: center;">
<br>
<b>COACHING REPORT</b><br>
<b>SEMESTER
#if(date('m', strtotime($detail->date)) > 6) 1 #else 2 #endif
- TAHUN PELAJARAN {{$detail->year->name}}</b>
</div>
<div style="width: 100%;font-size:11px!important;margin-top:10px">
<table style="width: 100%;text-align:left;">
<tr style="background: none;">
<td style="width: 15%;">Nama Coach</td>
<td>:</td>
<td style="width: 85%;">{{$detail->user->name}}</td>
</tr>
<tr style="background: none;">
<td>Nama Coachee</td>
<td>:</td>
<td>{{$detail->student->name}}</td>
</tr>
<tr style="background: none">
<td>Kelas</td>
<td>:</td>
<td>{{$student->grade->name}} {{$student->grade_detail->name}}</td>
</tr>
<tr style="background: none;">
<td>Periode</td>
<td>:</td>
<td>{{bulan_indo(explode("-",$startdate)[1])}} - {{bulan_indo(explode("-",$enddate)[1])}} {{date('Y',strtotime($enddate))}}</td>
</tr>
</table>
</div>
</th></tr>
</thead>
</table>
This is the view for the bottom part that works just fine
<table class="tableBorder" width="100%"
style="margin-top: 10px; clear: both; top: 80px;border-collapse: collapse;">
<thead>
<tr class="tableBorder">
<th
style="font-size: 11px; margin: 5px !important; font-weight: 120;width:7%;">
<b>AREA / RANAH PERKEMBANGAN</b></th>
<th
style="font-size: 11px; margin: 5px !important; font-weight: 120;width:10%;">
<b>DESKRIPSI</b></th>
</tr>
</thead>
<tbody class="bordered" style="">
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan akademik</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[0] !!}
</td>
</tr>
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan sikap sosial</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[1] !!}
</td>
</tr>
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan karakter</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[2] !!}
</td>
</tr>
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan ketrampilan/minat/bakat/talenta</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[3] !!}
</td>
</tr>
</tbody>
</table>
I try to comment the table,thead,tr,and th part, and leaving just the div and its finally showing up, but I have a lot of view that use this, so i was wondering if i can just fix this from the dompdf part without changing the view.
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?
I have an HTML email that has a creates a mobile version by using {display:none!important;} and has a media query that reveals it using {display:block!important;}.
When forwarded in Outlook, the email breaks and displays both images leaving a huge gap on the right side next to the mobile image.
Has anyone found a coding solution that would maintain the appearance when forwarded?
HTML
<table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="vanish">
<table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>
<a href="#" style="color: #999; text-decoration: none;">
<img src="Desktop.jpg" width="205" height="171" alt="" class="deviceWidth" style="display: block; background-color: #343434;" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End One Column -->
<!-- Houdini Start -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="display: none; visibility: none; width: 0px; height: 0px;" class="houdini">
<a href="#" style="color: #999; text-decoration: none;">
<img style="display: none; visibility: hidden; width: 0px; height: 0px; border: 0px;" src="Mobile.jpg" alt="" class="houdini" /></a>
</td>
</tr>
</table>
<!-- Houdini End -->
I think I've searched every corner of the interwebs to try and figure this problem out. I have found similar issues across the board, but none of the solutions have worked for me (either that, or I must be missing something).
I'm creating an email campaign with a table layout. In FF, Chrome and IE it all looks great, but when I test it in Outlook 2010 it gives me a horizontal white line between 2 TRs that are in the main table of the page.
Please observe 2 TRs below:
NOTE: I've edited this question to include the entire code:
<body>
<table width="100%">
<tr>
<td>
<table width="700" style="background-color: #ecebeb; border: solid maroon 2px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" align="center" >
<tbody>
<tr >
<td>
<table width="100%" style="background-color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; color: #000000">
<tr>
<td width="70%" cellpadding="10px" height="85">
<img src="http://www.codegroup.com.au/images/Introduction%20Newsletter/CodeGroup_Logo_small.png">
</td>
<td width="30%" style="text-align: right" height="85">
Building Certifiers<br>
Building Surveyors<br>
Access Auditors<br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding-left: 10; padding-right: 10; padding-top: 10; font-family: arial,helvetica,sans-serif; font-size: 14px; color: #000000">
<strong>
If you're designing or building, you need a Building Certifier<br>
CODE Group are specialist commercial Building Certifiers, Surveyors and Access Auditors.
</strong>
<hr>
</td>
</tr>
<tr>
<td style="padding-left: 10; padding-right: 10; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
We offer a comprehensive range of professional services which integrate the concept, design, approval
and project completion for the property and construction industry.<br><br>
We understand the practical demands of the construction industry and make every effort to assist our client
in finding solutions to compliance problems.<br><br>
Each project is approached with integrity and professional confidence to deliver the best possible solutions and
premium service to our clients.<br><br>
We understand the urgency of your project and that it can’t move forward unless we do our part so we contact
you at times during our assessment to let you know how it is progressing. <br><br>
<i><center>"Our mission is to manage risk for our clients in design and construction to ensure they meet
statutory<br>obligations whilst achieving project objectives and outcomes" </i></center>
<hr>
</td>
</tr>
<tr>
<td>
<table width="100%"style="font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
<tr>
<td width="50%" align="left" style="text-align: left; padding-left: 25;" valign="top" >
<b>BUILDING CERTIFIERS</b><br><br>
Design Certification: <br>
Certificate of Design Compliance<br><br>
Construction Certification: <br>
Certificate of Construction Compliance<br><br>
Permit Coordination: <br>
Building Permit & Occupancy Permit<br>
</td>
<td width="50%" align="right" style="text-align: right; padding-right: 25" valign="top" >
<b>BUILDING CONSULTANTS</b><br><br>
Preliminary Review & Report of Schematic Plans<br>
Access Audits, Appraisals & Consulting<br>
Due Diligence Inspections & Reports<br>
Building Audits for Benchmark Compliance<br>
Expert Building Code Advice<br>
Fire Engineering Advice<br>
</td>
</tr>
</table>
<br>
<table width="100%" style="font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
<tr>
<td width="38%" valign="bottom" style="padding-left: 25;">
<b>OUR SPECIALTIES</b><br><br>
Multi Residential Towers<br>
Hotel & Serviced Apartments<br>
Education Buildings<br>
Mixed Use Buildings <br>
</td>
<td width="38%" valign="bottom">
Hospitals & Healthcare Buildings<br>
Aged Care Developments<br>
Shopping Centres<br>
Office Buildings<br>
</td>
<td width="28%" valign="bottom">
Office & Retail Fitouts<br>
Industrial Buildings<br>
Sports Stadiums<br>
Mining Projects<br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-left: 10; padding-right: 10; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000" >
<br>
<b>Who we are</b><br><hr>
<p>CODE Group is made up of an established team of experienced members who have over 80 years building
industry experience in Perth, the north-west of WA and interstate. CODE Group's teamwork is our strength.<br><br></p>
</td>
</tr>
<tr>
<td>
<table width="100%" >
<tr>
<td width="53%">
<img src="http://www.codegroup.com.au/images/Introduction%20Newsletter/Team-Photo_no-corners.png" align="right">
</td>
<td width="47%" style="padding-left: 10; padding-right: 10">
<table style="font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
<tr><td>Gary Cox</td><td>Managing Director</td></tr>
<tr><td>Wayne Chant</td><td>Co-ordinating Building Surveyor</td></tr>
<tr><td>Paul da Costa</td><td>Senior Building Surveyor</td></tr>
<tr><td>Tanya Scarce</td><td>Building Surveyor</td></tr>
<tr><td>Kelly Hudson</td><td>Building Surveyor</td></tr>
<tr><td>Alison Shiels</td><td>Access Auditor</td></tr>
<tr><td>Antonia Yakubova </td><td>Office Manager</td></tr>
<tr><td>Linda Marr</td><td>Accounts Manager</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" style="padding-right: 10; padding-left: 10; font-family: arial,helvetica,sans-serif; font-size: 14px; color: #000000">
<b>Our Projects</b><hr>
</td>
</tr>
<tr>
<td align="middle" cellspacing="0" cellpadding="0">
<table>
<tr>
<td width="33%" style="padding-left: 20; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000" valign="top">
20 Storey Mixed Use Hotel<br>
Murray Street, Perth<br><br>
3 Storey Mixed Use Apartments<br>
215 Hay Street, Subiaco<br><br>
Point Fraser Entertainment Centre<br>
4500sqm, East Perth Foreshore <br><br>
Observations City Refurbishment<br>
Scarborough Beach
</td>
<td width="33%" valign="top" style="padding-left: 20; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
Heritage Conversion<br>
307 Murray Street, Perth<br><br>
Bidvest Distribution Centre<br>
107,000 cu/m Warehouse<br><br>
Joondalup Square<br>
13,000sqm Retail Showrooms
</td>
<td width="33%" valign="top" style="padding-right: 20; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
6 Storey Mixed Use Building<br>
Wexford Street, Subiaco<br><br>
Fitout of Council House<br>
Level 1 & Basement, Perth<br><br>
Veil Offices, 4 Storey offices<br>
Over existing 2 Storey Carpark<br>
253 St. Georges Terrace, Perth<br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="middle" valign="top" cellspacing="0" cellpadding="0">
<img style="display:block;" src="http://www.codegroup.com.au/images/Introduction%20Newsletter/Introduction2_image_stack2.png">
</td>
</tr>
<tr>
<td>
<table width="100%" style="background-color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 14px; color: #000000">
<tr>
<td width="50%" valign="bottom" style="padding-left: 10" height="80">
CODE Group<br>
7 First Avenue<br>
Applecross WA 6153
</td>
<td width="50%" valign="bottom" align="right" style="padding-right: 10" height="80">
08 9316 8111<br>
PO Box 1232<br>
Canning Bridge WA 6153<br>
www.codegroup.com.au
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
The horizontal white line is most likely coming from the image you have in your second row.
Try setting an inline style on the img to have display:block;...
<img style="display:block;" src="http://www.codegroup.com.au/images/Introduction%20Newsletter/Introduction2_image_stack2.png" />
That typically takes care of it.
Also, I'm not sure if it was just a typo when you posted your original question, but the first td element in the second tr isn't properly closed. Your first tr also only has one td, so you may want to either eliminate the element or add a colspan=2 to the td in the first row.
I had the same problem with my Mailchimp template. Only on MS Outlook this problem with the white line showed up.
Apparently MS Outlook add's this line when the height of a table gets higher than 700px. So for me the solution to this silly problem was to distribute the content of the email over a few tables. So it doesn't reach a height higher than 700px.
Maybe you can try in all your tables use these properties border="0" cellpadding="0" cellspacing="0"
something like this
<table width="900" border="0" cellpadding="0" cellspacing="0" style="color:#4a4a4a;">
<tr>
<td>.....</td>
</tr>
</table>
probably the table is generating that white space
I have a joomla 3.0.3. (upgraded from 2.5). But the joomla keeps changing my html code when I save a custom html module.
I am using the JCK editor and have tried "none" editor as well but that doesn't change it. I have also switched the text filter permissions in the global settings to "no filtering"... no change ether.
This is the code I am entering (an image and a table):
<p style="text-align: center;">
<img alt="En verden af skønne og skæve blomster" src="images/Content/General/skoenneogskaeveblomster.png" style="width: 428px; height: 39px;" /></p>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; vertical-align: top; width: 20%;">
<strong>Nyhedsmail</strong></td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<strong>Adresse</strong></td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<strong>Kontakt</strong></td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<strong>Bankoplysninger</strong></td>
<td colspan="2" rowspan="1" style="text-align: center; vertical-align: top; width: 20%;">
<strong>Åbningstider</strong></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: top; width: 20%;">
<p>
Gå ikke glip af tilbud og arangmenter.</p>
<p>
<a href="http://blomstergalleriet-viborg.dk/>Tilmeld dig vores nyhedsmail.</a></p>
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<p>
Blomster Galleriet</p>
<p>
Li. Sct. Mikkelsgade 19</p>
<p>
8800 Viborg</p>
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<p>
Tlf: 86 84 86 84</p>
<p>
Email: someemail</p>
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<p>
Reg. nr: 2783</p>
<p>
Konto nr: 4380 1656 49</p>
</td>
<td style="text-align: right; vertical-align: top; width: 10%;">
<p>
Mandag - Fredag:</p>
<p>
Lørdag:</p>
</td>
<td style="text-align: center; vertical-align: top; width: 10%;">
<p>
9:30 - 17:30</p>
<p>
9:30 - 13:00</p>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td colspan="2" rowspan="1" style="vertical-align: top; width: 10%; text-align: center;">
<strong>Specielle åbningstider</strong></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: right; vertical-align: top; width: 10%;">
<p>
Store bededag:</p>
<p>
Mors dag:</p>
<p>
Pinse dag:</p>
<p>
2. Pinse dag:</p>
<p>
Uge 29-30:</p>
</td>
<td style="text-align: center; vertical-align: top; width: 10%;">
<p>
9:30 - 13:00</p>
<p>
7:00 - 14:00</p>
<p>
Lukket</p>
<p>
Lukket</p>
<p>
Ferielukket</p>
</td>
</tr>
</tbody>
Webmaster og designer: Me
But when I have saved it looks like this:
<p>
<p center;\"=""> <img af="" alt="\"En" nne="" og="" src="\"images/Content/General/skoenneogskaeveblomster.png\"" ve="" verden="" /></p>
<p>
Nyhedsmail</p>
<table border="\"0\"" cellpadding="\"0\"" cellspacing="\"0\"" td="">
<tbody>
<tr>
<td a="" af="" dig="" glip="" href="\"http://blomstergalleriet-viborg.dk/" ikke="" og="" td="" tilbud="" tilmeld="" vores="">
<p>
Blomster Galleriet</p>
<p>
Li. Sct. Mikkelsgade 19</p>
<p>
8800 Viborg</p>
</td>
<td 84="" 86="" a="" href="\"mailto:someemail?subject=Blomster%20Galleriet\"" td="">
<p>
Reg. nr: 2783</p>
<p>
Konto nr: 4380 1656 49</p>
</td>
<td -="" mandag="" td="">
<p>
9:30 - 17:30</p>
<p>
9:30 - 13:00</p>
</td>
</tr>
<tr>
<td td="">
</td>
<td td="">
</td>
<td colspan="\"2\"" rowspan="\"1\"" specielle="" td="">
</td>
<td td="">
</td>
<td td="">
<p>
Store bededag:</p>
<p>
Mors dag:</p>
<p>
Pinse dag:</p>
<p>
2. Pinse dag:</p>
<p>
Uge 29-30:</p>
</td>
<td -="" 7:00="" 9:30="" p="">
<em><span 9px;\"="">Webmaster og designer: Me</em></td>
</tr>
</tbody>
As you can see the following changes:
* Image doesn't load
* links changing
* text size changes
* table changes
I hope someone knows what to do.
Did you toggle the editor off (show the HTML source) when entering the HTML tags? Otherwise the editors usually assume you want to enter some text and changes the HTML tags so it's safe to show.
Or your server does some funny things on its own.
I got it to Work now. I think it was something about the magic quotes setting on the PHP setup.