I'm making a Wordpress module to reserve a room.
Now I use mPDF to create the contracts of the reservations automatically.
mPDF has problems with creating tables with on every row a border line.
When I create the table and view it in html everything looks fine. But when I create a PDF with mPDF the does not show me the row bottom border.
This is the html code that I use to generate the pdf:
.logo
{
display: inline-block;
width: 130;
height: 146;
align: left;
hspace: 12;
}
.headerText
{
display:inline-block;
text-align: right;
float:right;
}
.header{
padding-bottom: 20px;
}
.table{
border-left: thin solid;
border-right: thin solid;
border-bottom: thin solid #000000;
border-top: thin solid;
}
.table{
margin-top: 10px;
margin-bottom: 10px;
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid black;
}
table tr:last-child {
border-bottom: none;
}
.Cell
{
width: 300px;
}
.firstCell
{
border-left: thin;
border-right: thin solid;
border-bottom: thin;
border-top: thin;
}
.smallCell
{
width:150px;
}
.largeCell
{
width: 450px;
}
.row
{
display: block;
}
.koninklijkeLogo
{
width: 30px;
}
.maxSize
{
width: 600px;
}
<table class="table">
<tr class="row">
<td class="smallCell firstCell">Naam:</td>
<td class="largeCell">{%name%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Adres:</td>
<td class="largeCell">{%adres%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Telefoonnummer:</td>
<td class="largeCell">{%phone%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">E-mailadres:</td>
<td class="largeCell">{%mail%}</td>
</tr>
</table>
Can I resolve the problem by changing some of my code or is this a bug in mPDF?
From this document, it appears that borders for tr elements are supported by the latest version of mPDF (version 6).
Are you using the latest version?
Maybe you can try to apply a bottom border to the cells only, and not the rows? (Just make sure there are no table cellspacing or td cell margins, or you will see gaps in the borders).
Related
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?
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Browsers shows like this Browsers View but Generated PDF by dom pdf shows like this Generated PDF View
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#header { position: fixed; left: 0px; width:100%; bottom: -150px; right: 0px; height: 150px; background-color: #4b94d9; color:#000; text-align: left; }
#page-wrap {
width: 700px;
margin: 0 auto;
}
.center-justified {
text-align: justify;
margin: 0 auto;
width: 30em;
}
table.outline-table {
border: 1px solid;
border-spacing: 0;
}
tr.border-bottom td, td.border-bottom {
border-bottom: 1px solid;
}
tr.border-top td, td.border-top {
border-top: 1px solid;
}
tr.border-right td, td.border-right {
border-right: 1px solid;
}
tr.border-right td:last-child {
border-right: 0px;
}
tr.center td.center {
text-align: center;
valign:"middle";
}
td.pad-left {
padding-left: 5px;
line-height: 2;
}
tr.right-center td, td.right-center {
text-align: right;
padding-right: 50px;
}
tr.right td, td.right {
text-align: right;
}
.content > div > span{
display:inline-block;
width:50%; /* or choose some other value */
}
.contentdate > div > span{
display:inline-block;
width:35%; /* or choose some other value */
}
<table width="100%" class="outline-table">
<tbody>
<tr class="border-bottom border-right" style="background:#353940;color:#FFF;">
<td width="35%" class="pad-left"><strong>Item</strong></td>
<td width="10%" style="text-align:center;"><strong>Quantity</strong></td>
<td width="10%" class="right"><strong>Unit Cost</strong></td>
<td width="15%" class="right"><strong>Total</strong></td>
</tr>
<tr class="border-right">
<td class="pad-left">some item name one</td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
</tbody>
</table>
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Try This.
td.pad-left {
padding-left: 5px;
//line-height: 2; <--remove this
}
Html
<tr class="border-right">
<!-- give margin top in particular line -->
<td class="pad-left"><p style="margin-top:10px;">some item name one</p></td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
That's how the page looks like currently: http://i.imgur.com/nEHLFUX.png[1] and there are couple of bugs that I would love you to help me with. 2 main ones I want the spell names to be aligned to the right next to little icons of spells and second of all there is a background picture and when I zoom the site out it moves downwards and to the left and I want it to always stay at the same place.
Now code:
class spell {
function do_spell($spellicon, $spellname, $spelltext, $changeinpower) {
echo '
<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
<tr>
<td ><img class="spellimage" src="/abilities/'.$spellicon.'"></td>
<td class="spellname">'.$spellname.' - </td>
<td class="spelldesc">'.$spelltext.'</td>
<td class="changeinpower"><img src="/icons/'.$changeinpower.'"></td>
</tr>
</table>
</div>
';
}
}
patch.php part
$karthus = new splash;
$laywaste1 = new spell;
$laywaste2 = new spell;
$karthus->do_splash('Karthus','cropkarthus','Karthus_0.jpg');
$laywaste1->do_spell('64px-Lay_Waste.jpg','Lay Waste (Q)','Added a new indicator that shows the full area of effect','new.png');
$laywaste2->do_spell('64px-Lay_Waste.jpg','Lay Waste (Q)','Added crit-style combat text and a unique sound effect for double-damage Qs','new.png');
Some css:
.spellrow {
width: 900px;
padding: 0;
margin-bottom: 3px;
background-color: #ffffff;
box-shadow: 1px 1px #cccccc; }
.spelltable {
width: 100%;}
.spellimage {
width: 32px;
height: 32px;
padding-left: 5px;}
.spellname {
white-space: nowrap;
padding: 0 5px;
width: 10px;}
.spelldesc {
font-size: 15px;
line-height: 1.05em;}
.changeinpower {
width: 60px;}
/* And now the img in the background part */
.season2014
{
background-color:#f1f1f1;
background-image: url('/season_graphic/SEASON2014_2.png');
background-repeat: no-repeat;
background-position: 20% 50%;
background-origin: content-box;
background-position: fixed; }
<body class="season2014";>
PS. any kind of mistakes in code I would love you to point out I'm really new to the web-designing thingy
The problem with the background moving is from the background-position: fixed. This fixed value is not valid CSS. Try playing with the values available for the property to get the desired effect. More info on the Mozilla Dev Network for CSS with the background-size property.
About the name, I haven't seen any text-align: left in your CSS, that's maybe what you're looking for in your .spellname property. But more than that, the alignment problem comes from the width which is just width: 10px; in the .spellname property.
Because you fixed the total row width to 900px, why not use pixels all the way to define all the widths ? Like so:
.spellrow {
width: 900px;
padding: 0;
margin-bottom: 3px;
background-color: #ffffff;
box-shadow: 1px 1px #cccccc;
}
.spelltable {
width: 100%;
}
.spellimage {
width: 32px;
height: 32px;
padding-left: 5px;
}
.spellname {
white-space: nowrap;
padding: 0 5px;
text-align: left;
width: 150px; /* Adapt to your needs */
}
.spelldesc {
font-size: 15px;
line-height: 1.05em;
text-align: left;
width: 658px; /* Adapt to your needs */
}
.changeinpower {
width: 60px;
}
And the corresponding HTML code
<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
<tr>
<td class="spellimage">IMG</td>
<td class="spellname">Name</td>
<td class="spelldesc">Text with plenty of info here</td>
<td class="changeinpower">IMG</td>
</tr>
</table>
</div>
On a side note, doing one table per item is loosing the whole purpose of tables: one item is one row of the table. You should have one table per category and each spell being a row in the according table.
I have a PDF that is being generated by TCPDF in php. The whole thing looks great, but I cant increase the size of font in any section of the table that is generated. My CSS is not great, but any idea what I am doing wrong?
CSS:
<style>
}
table.first {
color: #003300;
font-family: helvetica ;
font-size: 8pt;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: white;
}
td {
border: 1px solid black;
background-color: white;
}
</style>
HTML:
<table class="first" cellpadding="0" cellspacing="0">
<tr>
<td width="50%"><B>1a.</b> Name of Insurance Plan (<B>OFFICE USE ONLY</b>):
<BR>
<BR><BR>
<BR><B>1b.</b> Insurance I.D. Number (<B>UTAH ONLY</b> - Check with the patient and if they have Utah Medicaid and include the Medicaid I.D. Number.):
<BR><BR><B><span style='font-size: 24pt;'>$medicaidid,</span></b>
<BR><BR><B>1c.</b> Patient Name (Last Name, First Name) & DOB (Typed out, example: January 01, 1901):
<BR><BR><B>$name</b>
<BR><B>$dob</b><BR></td>
<td width="50%"><B>2a.</b><BR> <img src="lilogo.png" style="width:8500%;" height="75">
<BR><B>2b.</b> Appointment Number: <BR><BR> <B>$appid</b></td>
</tr>
</table>
remove the } under the style tag
This is your code:
<style>
}
table.first {
color: #003300;
font-family: helvetica;
Try this instead:
<style>
table.first {
color: #003300;
font-family: helvetica;
I dont know what are you trying to say, but on jsfiddle.net there is no issue regarding font size as for example when I tried,
*{
font-size:20px;
}
it worked good or if you have any other issue, please be clear !
This is most likely the culprit for this page:
http://www.mypicx.com/04192010/ff/
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
th
{
background-color:#A7C942;
color:white;
}
I don't know why, but the page has some php scripts in it which shows a table from mysql database. As you can see in the url above.
Please help, why do I see those lines everytime I put those css scripts
Looks like your borders are being set to all of the tables in the page, and not just one.
Try something like:
.mytable
{
border-collapse:collapse;
}
.mytable th, .mytable td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
.mytable th
{
background-color:#A7C942;
color:white;
}
And use a class in the HTML on the table you wish to have these borders on:
<table class="mytable">
<tr>
<th>Time</th>
</tr>
<tr>
<td><span class="A">8:00 AM</span></td>
</tr>
</table>