hi I am using dompdf for generating pdf from HTML but not able to understand why it gets break while printing the pdf
here is my function
public function printRunsheetBymanifestAction()
{
$manifestId = $this->params()->fromRoute('id', 0);
$getDetails = $this->getDeliveryTable()->getRunSheetData(array('manifestId' => base64_decode($manifestId)));
$getItemDetails = $this->getManifestTable()->getManifestItemsById($getDetails[0]['manifestId']);
$options = new Options();
$options->set('isRemoteEnabled', true);
$options->set('defaultFont','Courier');
$options->set('defaultPaperSize','A4');
$domPdf = new \Dompdf\Dompdf($options);
$domPdf->set_option('isHtml5ParserEnabled', true);
$view = $this->getServiceLocator()->get('ViewRenderer');
$viewModel = new ViewModel();
$viewModel->setTemplate('delivery/index/print-runsheet-bymanifest.phtml');
$viewModel->setVariable('results', $getDetails);
$viewModel->setVariable('itemDetails', $getItemDetails);
$content = $view->render($viewModel); //make html content for loadn in doampdf
$domPdf->loadHtml($content);
$domPdf->render();
$fileName = $getDetails[0]['runsheetNumber'].'_'.date('d_m_Y');
$domPdf->stream($fileName,array("Attachment"=>1));
exit;
}
here is my phtml template even I try the page break CSS for break the page after desired output
<?php $results = $this->results;
$items = $this->itemDetails;
?>
<style>
table.body {
width: 100%;
margin: 0 auto;
}
td.text-right{text-align: right;}
td.text-center{text-align: center;}
.page_breack{
clear: both;
page-break-after: always;
}
</style>
<table class="body" align="center" style="border-top: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333;">
<tr>
<td>
<div id="header">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 30%">
<img style="width: 250px" src="<?=$this->basePath();?>/manifests/generate-barcode/<?php echo $results[0]['runsheetNumber']; ?>">
</td>
<td style="width: 70%">
<table class="row" style="width: 100%">
<tr>
<td >Location: <?php echo $results[0]['branchName']; ?></td>
</tr>
<tr>
<td >Website: www.xfas.in</td>
</tr>
<tr>
<td >
Daily Runsheet for : <?php echo $results[0]['allocated'.$results[0]['allocatedTo'].'Code'].' - '.$results[0]['allocated'.$results[0]['allocatedTo'].'Name']; ?>
</td>
</tr>
<tr>
<td class="text-right">
<strong>Printed # : <?php echo date('d.m.Y'); ?></strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table width="100%" style="border-collapse: collapse;">
<tr>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">SNo.</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">AwbNo.</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">Consignee Details</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">Pin Code</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">Signature</th>
</tr>
<?php if(count($items) > 0):
foreach ($items as $key => $val):
// $key = $key +1;
?>
<tr class="<?php
++$key;
if($key%14 == 0 && $key !=0)
echo "page_breack";
//echo ++$key; ?>" ><td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><?php echo $key; ?></td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><?php echo $val['Awb']; ?></td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><strong><?php echo $val['Consignee']; ?></strong><br>
<?php echo $val['Address'].', '.$val['Place'].', '.$val['ConsigneeArea']; ?>
</td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><?php echo $val['PinCode']; ?></td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"></td>
</tr>
<?php endforeach; ?>
<?php
$ramainRow = count($items)%14;
if($ramainRow >0){
// $cnt = 14 - count($items);
for ($i =0; $i < $ramainRow; $i++){?>
<tr>
<td colspan="5" style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"></td>
</tr>
<?php } ?>
<tr>
<td colspan="5" style="font-size: 12px; text-align:center; height: 53px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;">
<strong>Receiver Name:</strong> <?php echo $results[0]['allocated'.$results[0]['allocatedTo'].'Code'].' - '.$results[0]['allocated'.$results[0]['allocatedTo'].'Name']; ?><br>
<strong>Signature:</strong>
</td>
</tr>
<?php }?>
<?php endif;?>
</table>
</td>
</tr>
above is the htm fiel file for better understanding i am givig the pdf fil
I'm currently working on a project in which I've to create an invoice using domPDF. I found a template on github for nice invoice.
Now whenever I create a PDF it breaks every table row in new page and create a 5-6 pages PDF.
I've tried tweaking css of this template but no luck.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="https://www.sparksuite.com/images/logo.png" style="width:100%; max-width:300px;">
</td>
<td>
Invoice #: 123<br>
Created: January 1, 2015<br>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br>
12345 Sunny Road<br>
Sunnyville, CA 12345
</td>
<td>
Acme Corp.<br>
John Doe<br>
john#example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
Check #
</td>
</tr>
<tr class="details">
<td>
Check
</td>
<td>
1000
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price
</td>
</tr>
<tr class="item">
<td>
Website design
</td>
<td>
$300.00
</td>
</tr>
<tr class="item">
<td>
Hosting (3 months)
</td>
<td>
$75.00
</td>
</tr>
<tr class="item last">
<td>
Domain name (1 year)
</td>
<td>
$10.00
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: $385.00
</td>
</tr>
</table>
</div>
</body>
</html>
I want PDF output to be like this.
//send email
$to = $_POST['email'];
$subject = "Registration Confirmation";
$url="localhost/activate.php?x=$id&y=$activasion";
define('URL',"$url");
$body="<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* FONTS */
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px){
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
We are thrilled to have you here! Get ready to dive into your new account.
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#FFA73B" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
<a href="localhost" target="_blank">
<img alt="Logo" src="logo.png">
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#FFA73B" align="center" style="padding: 0px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
<h1 style="font-size: 48px; font-weight: 400; margin: 0;">Welcome!</h1>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">We are excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#FFA73B">Confirm Account</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">"If that does not work, copy and paste the following link in your browser:"</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">URL</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">If you have any questions, just reply to this email—we are always happy to help out.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">Cheers,<br>The Edutheon Team</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td bgcolor="#FFECD1" align="center" style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<h2 style="font-size: 20px; font-weight: 400; color: #111111; margin: 0;">Need more help?</h2>
<p style="margin: 0;">We’re here, ready to talk</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>"";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
$mail = new Mail();
$mail->isHTML(True)
$mail->setFrom(SITEEMAIL);
$mail->addAddress($to);
$mail->subject($subject);
$mail->body($body);
$mail->send();
how to do I send this email with phpmailer whenever i try to send it always return an error and i cannot use get_file_contents() because it contains variables dependent on variables please answer Thanks I think this problem arises due to "/' used in the html Using this code on xampp server and the it working on text email and not on the html plz help i need to complete my project.
You're using double quotation marks the define the $body variable, then using them throughout the value you set it to, causing the string reading to break.
I think reading this answer would help you a lot.
Literally replacing all " with \" inside the string should work (though if you have any legitimate uses of variables inside which I missed, I did not see them). Here would be the corrected code:
$body = <!DOCTYPE html>
html>
<head>
<title></title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
<style type=\"text/css\">
/* FONTS */
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px){
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*=\"margin: 16px 0;\"] { margin: 0 !important; }
</style>
</head>
<body style=\"background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;\">
<div style=\"display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;\">
We are thrilled to have you here! Get ready to dive into your new account.
</div>
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">
<tr>
<td bgcolor=\"#FFA73B\" align=\"center\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td align=\"center\" valign=\"top\" style=\"padding: 40px 10px 40px 10px;\">
<a href=\"localhost\" target=\"_blank\">
<img alt=\"Logo\" src=\"logo.png\">
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor=\"#FFA73B\" align=\"center\" style=\"padding: 0px 10px 0px 10px;\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td bgcolor=\"#ffffff\" align=\"center\" valign=\"top\" style=\"padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;\">
<h1 style=\"font-size: 48px; font-weight: 400; margin: 0;\">Welcome!</h1>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor=\"#f4f4f4\" align=\"center\" style=\"padding: 0px 10px 0px 10px;\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato\", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">We are excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\">
<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td bgcolor=\"#ffffff\" align=\"center\" style=\"padding: 20px 30px 60px 30px;\">
<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td align=\"center\" style=\"border-radius: 3px;\" bgcolor=\"#FFA73B\">Confirm Account</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 0px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">\"If that does not work, copy and paste the following link in your browser:\"</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 20px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">URL</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">If you have any questions, just reply to this email—we are always happy to help out.</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">Cheers,<br>The Edutheon Team</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor=\"#f4f4f4\" align=\"center\" style=\"padding: 30px 10px 0px 10px;\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td bgcolor=\"#FFECD1\" align=\"center\" style=\"padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<h2 style=\"font-size: 20px; font-weight: 400; color: #111111; margin: 0;\">Need more help?</h2>
<p style=\"margin: 0;\">We’re here, ready to talk</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>";
I am using dompdf in codeigniter, the HTML page looks fine but in dompdf generated pdf, there is a black box.
The code in the footer section is:
<div class="signature-footer">
<table>
<tr>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Prepared By<br><?php echo $quotation_detail[0]->employee_name; ?><br><?php echo $quotation_detail[0]->designation_name ; ?></td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Authorized Signature<br> <br> </td>
</tr>
</table>
</div>
</div><div class="below-border-footer"></div><div style="text-align: center"><img src="<?php echo base_url(); ?>interface/img/footerImage.png"> </div></div></body>
</html>
CSS for these two elements:
.below-border-footer {
width: 100%;
border-top: 0 ;
padding-bottom: 0;
text-align: center;
}
.signature-footer {
font-size: 12px;
font-weight: bold;
width: 100%;
position: relative;
margin-top: 70px;
margin-bottom: 2px;
}
I've tried for hours but no result. How can I remove the black box in the footer?
I want to show certain <div> on a certain <td> of a table. Here is what I'm trying in HTML:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="10%" valign="middle">{$avatar}{$change_avatar}</td>
<td class="trow1" width="90%" valign="top">
{$online_status}<span class="largetext"><strong>{$formattedname}</strong></span>
<div class="smalltext">{$groupimage}</div>
</td>
</tr>
</table>
On this code, I've this:
$change_avatar = '<div class="change_avatar">Change Avatar</div>';
I want to show {$change_avatar} on mouse hover when mouse comes over to the first <td> of the table, code I showed above.
Here is CSS I used;
.change_avatar{
display: none;
font-size: 11px;
background: #363737;
color: #FFF;
opacity: 0.8;
border-radius: 2px;
padding: 3px 5px;
}
.change_avatar a:link, .change_avatar a:visited, .change_avatar a:active{
color: #FFF !important;
text-decoration: none;
}
td:hover .change_avatar{
display: inline;
margin-top: 50px;
margin-left: -70px;
position: absolute;
}
Please help.
Try this:
CSS:
.change_avatar{
display: none;
font-size: 11px;
background: #363737;
color: #FFF;
opacity: 0.8;
border-radius: 2px;
padding: 3px 5px;
}
.change_avatar a:link, .change_avatar a:visited, .change_avatar a:active{
color: #FFF !important;
text-decoration: none;
}
td #change_avatar:hover .change_avatar{
display: inline;
margin-top: 50px;
margin-left: -70px;
position: absolute;
}
HTML:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="10%" valign="middle" id="change_avatar">{$avatar}{$change_avatar}</td>
<td class="trow1" width="90%" valign="top">
{$online_status}<span class="largetext"><strong>{$formattedname}</strong></span>
<div class="smalltext">{$groupimage}</div>
</td>
</tr>
</table>
you can use JQuery to achieve this. e.g. you td have id="avatarTD"
$("#avatarTD").mouseover(function(){
$(".change_avatar").show();
});
$("#avatarTD").mouseout(function(){
$(".change_avatar").hide();
});