DOMPDF creating blank page at the start of document in laravel. I have chacked all html cotent there is no spaces. anybody has suggestion?
Below is code which I am trying to fit into a pdf file using DOMPDF
<div class="invoice printableArea" style="color: #333333; font: 12px Verdana; padding: 0; margin: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main-table"
style="height: 100%;margin-top: 0;">
<tr>
<td align="center" style="width: 100%; height: 100%;">
<table cellpadding="0" cellspacing="0" border="0"
style=" width: 100%; table-layout: fixed; margin: 0px;">
<tr>
<td style=" border: 1px solid #e6e6e6; margin: 0px auto 0px auto; padding: 20px; text-align: left;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0;">
<tr>
<td style="padding:0px 0px 0px 0px;">
<img src="" width="150" height="45" alt=""/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="5" border="0" width="100%" style="border: 1px solid #e6e6e6; padding:0;margin-top:10px;">
<tr valign="top">
<td style="padding: 15px;">
<h2 style="margin: 0px 0px 10px 0px;">Invoice #</h2>
<table style="float:left;border:none;margin:0;" >
<tbody>
<tr>
<td style="padding: 5px;text-align: right;">Invoice Date : </td>
<td style="padding: 5px;text-align: right;"> </td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Payment Method : </span></td>
<td style="padding: 5px;text-align: right;"></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Shipping Method : </span></td>
<td style="padding: 5px;text-align: right;"></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 30px 0px 0px 0px;text-align: center;">
<div id="invoiceBarcodeTarget"></div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="5" border="0" width="100%"
style="padding:20px 0px;">
<tr valign="top">
<td width="34%"
style="padding:10px;">
<h3 style=" padding: 0px 0px 3px 1px; margin: 0px;">Billing Address : </h3>
<p style="margin: 2px 0px 3px 0px;">
<strong></strong> </p>
<p style="margin: 2px 0px 3px 0px;">
<br/></p>
<p style="margin: 2px 0px 3px 0px;">
</p>
<p style="margin: 2px 0px 3px 0px;">
</p>
<p style="margin: 2px 0px 3px 0px;">
<i title="Phone" class="fa fa-phone-square"></i>
<br/>
<i title="Phone" class="fa fa-phone-square"></i>
@endif
</p>
</td>
<td width="33%" style="padding:10px;">
<h3 style=" padding: 0px 0px 3px 1px; margin: 0px;">Shipping Address : </h3>
<p style="margin: 2px 0px 3px 0px;">
<strong></strong> </p>
<p style="margin: 2px 0px 3px 0px;">
<br/></p>
<p style="margin: 2px 0px 3px 0px;">
</p>
<p style="margin: 2px 0px 3px 0px;">
</p>
<p style="margin: 2px 0px 3px 0px;">
<i title="Phone" class="fa fa-phone-square"></i>
</p>
@endif
</td>
</tr>
</table>
<table class="" style="background-color: #dddddd;border: 1px solid #e6e6e6;margin:0;">
<tr>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "><strong class="text-center">Sr. No.</strong></th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Product
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Unit price
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Discount
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Quantity
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Subtotal
</th>
</tr>
<tbody>
<tr>
<td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: center; ">{{$i}}</td>
<td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: left; ">
<b>{{@$product_detail['title']}} </b> <br />
<b>Seller : </b> {{@$product_detail['store_name']}}
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>{{ number_format(@$product['price'], 2) }}</span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>0.00</span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
{{@$product['quantity']}}
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>{{ number_format(@$product['price']*$product['quantity'], 2) }}</span>
</td>
</tr> </tbody>
</table>
<table class="" style="background-color: #dddddd;border: 1px solid #e6e6e6;margin:0;">
<tr>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "><strong class="text-center">Sr. No.</strong></th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Product
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Unit price
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Discount
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Quantity
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Delivery Address
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Subtotal
</th>
</tr>
<tbody><tr>
<td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: center; ">{{$i}}</td>
<td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: left; ">
<b>{{@$product_detail['title']}} </b> <br />
<b>Seller : </b> {{@$product_detail['store_name']}}
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span></span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>0.00</span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
1
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span style="text-align:left;float:left;">
</span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>{{ number_format(@$product['price'], 2) }}</span>
</td>
</tr>
<?php $i++; ?>
@endforeach
@else
<tr>
<td colspan="100%">
{{trans('messages.error.order.order_product.empty')}}
</td>
</tr>
@endif
</tbody>
</table>
@endif
<table style="width:35%;float:right;border:none;" >
<tbody>
<tr>
<td style="padding: 5px;text-align: right;">Subtotal : </td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>{{ number_format(@$invoiceData['invoice']['subtotal'], 2) }}</span></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Order Discount (-) : </span></td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>00.00</span></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Price After Discount : </span></td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>{{ number_format(@$invoiceData['invoice']['total'], 2) }}</span></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Shipping Cost : </span></td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>{{ number_format(@$invoiceData['invoice']['shipping_cost'], 2) }}</span></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Grand Total : </span></td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>{{ number_format(@$invoiceData['invoice']['total'], 2) }}</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Three things:
1) Nested tables. Generally fine, but your outer table is just a container for the inner table. dompdf is currently unable to break an individual table cell across pages (#98) so this will cause you all kinds of grief. If you have styling on that table that you want to apply (e.g. a border) use a div instead.
2) The height: 100%; styling. Avoid this if you can on elements that are the direct child of the body. dompdf's height calculation can sometimes be off by a bit, causing paging on an element with 100% of the body height.
3) The height: 100%; styling, part 2. The height probably won't be what you expect since dompdf (and by default web browsers) determine height by the content area not the containing box. Margin and padding will further expand the element's height unless everything is specifically set to 0. At least until dompdf supports the box-sizing declaration.