I am just starting with PHP and having trouble of getting my page result to print right. I call the page below from index.php. It looks ok if I displayed the page on a monitor but when I print the page and it is more than one page, the section at the end of the page got cut off and continue on the second page. I am looking for a way so that when I print the page, it will look if the section (each item number) will fit the whole section (repair desc, common cause, etc) in that page. If it does not then just print on the next page.
I also included the CSS file. Basically what it does is forcing the width of page to fit a letter-size paper. Thank you in advance.
<?php include_once $_SERVER['DOCUMENT_ROOT'] .
'/fms/includes/helpers.inc.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print Repair Form</title>
<link rel='stylesheet' type='text/css' href='/fms/css/letter-size.css' />
</head>
<body>
<div id="page-wrap">
<table>
<tr>
<td rowspan = "3" id="logo"><img src="/fms/images/flex_no_address_256.jpg" /></td>
<td rowspan = "3" id="address">Address<br />
City, State Zipcode <br />
Phone number <br />
website address
</td>
<td>
<table>
<tr>
<td id="repairinfo" class="theading" colspan = "2">Repair Detail</td>
</tr>
<tr>
<td><?php htmlout($custno); ?></td>
<td width="100px">WO: <?php htmlout($wonum); ?></td>
</tr>
<tr>
<td><?php htmlout($custname); ?></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<?php foreach($items as $item): ?>
<table border ="1">
<tr>
<td class="theading">Type of Repair</td>
<td class="theading">Repair ID</td>
<td class="theading">Fault Picture</td>
</tr>
<tr>
<td class="tablepadding"><?php htmlout($item['repairtype']); ?></td>
<td class="tablepadding"><?php htmlout($item['itemno']); ?></td>
<td rowspan="7" align="center">
<img src="/fms/images/wo_items/<?php htmlout($item['filename']); ?>" width="256" />
</td>
</tr>
<tr>
<td class="theading" colspan="2">Repair Description</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['repairdesc']); ?>
</td>
</tr>
<tr>
<td class="theading" colspan="2">Common Causes</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['commoncause']); ?>
</td>
</tr>
<tr>
<td class="theading" colspan="2">Preventive Measures and Maintenance</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['maintenance']); ?>
</td>
</tr>
</table>
<br />
<?php endforeach; ?>
</div>
</body>
</html>
CSS:
* { margin: 0; padding: 0;}
body {
font: 12px/1.4 Georgia, serif;
}
a img {
border: none;
}
#page-wrap {
width: 800px;
margin: 0 auto;
}
table {
width:100%;
}
#logo {
width: 256px;
}
#address {
width: 170px;
}
#repairinfo {
border-bottom: solid 1px;
text-align: center;
}
.theading {
font-weight: bold;
padding: 3px;
}
table tr td.tablepadding {
padding: 3px;
}
It should be achieved through CSS and no PHP, although you can use php as well as a workaround, google for css media.
There are some tricks for the CSS of your printing: http://slodive.com/web-development/css-print-page-tricks/
Can't give you specific details because I haven't worked too much with printings but it all comes to testing the total height that fits on the paper, and looking for a measure in php (maybe lines?) so if the size is bigger than the one you set, it creates another Table.
You could also use Javascript as you can detect element's (for example a table's) height, and call some function when the max height is reached.
Also I want to suggest you not using tables if it's not totally necesary, It's a very old-school approach and troublesome to modify, with more different behaviour across browsers, and with a lot more of unnecesary code.
Your issue is not with PHP but with CSS.
You need to include a print specific stylesheet as this will be different to your computer monitor styles.
Here's a good blog post about print CSS
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
In your html the print stylesheet <link> element will need a media="print" attribute
Then in your print stylesheet you can specify a width
Related
I'v created a prestashop module in which it obtains airway bill numbers from an external API, This number I then add on a webpage and let users to print.
This bar code only appears on HTML page but does not visible on print preview dialog box
I use Smarty for html part since its by default uses by Prestashop.
Hear is my code,
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
any idea why this is happening? is there any solution for this?
UPDATE
{literal}
<style>
table { border-collapse: collapse;font-family:arial;}
td {padding: 8px;}
body { margin: 0;padding: 0;background-color: #FAFAFA;font: 12pt "Tahoma"; }
* {box-sizing: border-box;-moz-box-sizing: border-box; }
.page { width: 21cm;min-height: 29.7cm;padding: 1cm;margin: 0.5cm auto;border: 1px #D3D3D3 solid; border-radius: 5px;
background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
.subpage { padding: 0cm;border: 0px black solid;height: 256mm; }
#page { size: A4; margin: 0; }
#media print {.page {margin: 0;border: initial;border-radius: initial;width: initial;min-height: initial;box-shadow: initial;
background: initial;page-break-after: always;}}
</style>
{/literal}
{foreach from=$orders_array item=order}
<div class="page">
<div class="subpage">
<table border="3" style="border-style: solid;width:100%">
<tr>
<td>
<table border="0" style="border-style: solid;width:100%">
<tr>
<td><img src="{$order.other_data.logo}" alt="logo" height="100" width="300"></td>
<td>
<h3><u>{$order.other_data.service}</u></h3><br>
{$order.other_data.ppaddress}
<br>www.postaplus.com</td>
</tr>
</table>
<table border="1" style="border-style: solid;width:100%">
<tr>
<td style="width:40%"><b>From</b></td>
<td>
<b>{$order.other_data.shipper_name}</b>
<br>
{$order.other_data.shipper_address},<br>
{$order.other_data.shipper_country_code},<br>
Phone: {$order.other_data.shipper_phone},
</td>
</tr>
<tr>
<td><b>To</b></td>
<td>
<b>
</b><br>
{$order.params.SHIPINFO.Consignee.ToName},<br>
{$order.params.SHIPINFO.Consignee.ToAddress},
<br>
<b>Phone:</b> {$order.params.SHIPINFO.Consignee.ToMobile} / {$order.params.SHIPINFO.Consignee.ToTelPhone} <br>
<b>Civil Id:</b><br>
</td>
</tr>
<tr>
<td><b>Pay Type: {$order.params.original_order_array.payment_method}</b></td>
<td>Amount: {$order.params.original_order_array.total} - Currency - {$order.params.original_order_array.codcurrency} </td>
</tr>
<tr>
<td><b>Reference 1</b></td><td>{$order.params.original_order_array.reference} </td></tr>
<tr>
<td><b>Reference 2</b></td><td></td></tr>
<tr>
<td><b>Service</b></td><td>{$order.other_data.service}</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td><b>Pieces:</b></td> <td>1</td> <td><b>Weight:</b></td> <td>{$order.other_data.total_weight} Kg</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><b>Remarks</b></td>
<td></td>
</tr>
<tr>
<td>
<b>Note 2</b></td><td>{$order.other_data.original_order_data.notes2}</td></tr>
<tr>
<td><b>Shipper Order Number:</b></td>
<td>
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
</td>
</tr>
<tr>
<td><b>Shipment Date:</b></td><td>{$order.other_data.awb_date}</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
{/foreach}
<script>
window.print();
</script>
screen shots
html view
print preview
Thanks in advance.
Roshan
Roshan save the below code in html format and check whether it shows barcode in your print preview . if it works than you should try changing your font or check your code again..it will be very helpful if you upload your code here as well.also check display background graphics checkbox in print preview menu
<!DOCTYPE html>
<html>
<head>
<link href='https://fontlibrary.org/face/idautomationhc39m-code-39-barcode'
rel='stylesheet'>
<style>
p.serif {
font-family: 'IDAHC39M Code 39 Barcode', Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
Look for the link to the font itself in the header. It should look like this:
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/idautomationhc39m-code-39-barcode" type="text/css"/>
Change the media="screen" to media="screen, print".
I would also recommend you try using 'IDAHC39M Code 39 Barcode' instead of IDAutomationHC39M for font family. (Make sure the quotes are there.)
I'm having a bit of a problem putting together a HTML email which will render properly in outlook, i had initially got everything working fine through the use of list items and the list-style-image Property, but that isn't supported in outlook.
Basically, i have a table with 2 rows in it, the left hand side one has an 11pixel image being using as a custom bullet point, and on the right hand side is some text.
My problem is no matter what i do i cannot get the column on the left to maintain an 11 pixel width, the columns ALWAYS split equally down the middle of the table. Help please?
HTML
<table>
<tr>
<td>
<img src="Small Image" />
</td>
</tr>
<tr>
<td class="red">
<h4>
TEXT
</h4>
</td>
</tr>
<tr>
<td class="webinar">
<table>
<tr>
<td class="left">
<img src="/Bullet.png" />
</td>
<td class="right">
<p>
TEXT
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
td.webinar .left {
width:11px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar .right {
width:144px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar {
background-color:#ccc6d2;
border:1px solid #313131;
padding-top:8px;
padding-bottom:10px;
}
you want to use css styles in emails? then you are going to have a bad time in most clients..
try to:
<table>
<tr>
<td width="144px">
<img src="Small Image" />
</td>
</tr>
</table>
in email templates you should always apply inline styling as "oldschool" as possible!
I've built a site with tons of pages and have used tables because I am new to coding and they're easy to use. I used Chrome to do all of my testing and stuff but I've recently found that Internet Explorer doesn't show certain table elements like border colours and my tables barely work at all with Firefox.
My PROBLEM is that my entire site is laid out using tables, this one specific example below is correct to use a table yes but it's just an example to show how I code my tables.
I've been looking at CSS for hours now, trying various tutorials/guides but I can't get my head around it, every time I get somewhere something happens and I have to start from scratch.
Right, scratch what I put before. Here's 2 screenshots. The one that looks fine is Google Chrome, the other is Firefox:
Now here's the code:
<style>
table.fix{
table-layout: fixed;
font-size: 90%;
}
</style>
<table BORDERCOLOR="grey" style="width: 60%;" align="left" class="fix">
<tr>
<td><?php echo "<b>Subject: ",$subject,"</b>"; ?></td>
</tr>
</table>
<table BORDERCOLOR="grey" style="width: 40%;" align="right" class="fix">
<tr>
<td><?php echo $datesent; ?></td>
</tr>
</table>
<table BORDERCOLOR="grey" style="width: 100%;"class="fix">
<tr>
<td><?php echo $message; ?></td>
</tr>
</table>
<table BORDERCOLOR="grey" align="left" class="fix">
<tr>
<td><?php echo "From: <a href='viewprofile.php?userid=$fromuser'>",$id2," </a>"; ?></td>
</tr>
</table>
<table class="fix">
<tr>
<td><input type='submit' name='reply' value='Reply' onclick="location.href='sendmail.php?user=<?php echo $fromuser; ?>&subject2=<?php echo $subject; ?>&replyto=<?php echo $id; ?>'"></td>
</tr>
</table>
Now all I need is it to look like it does on Chrome but on every browser :) Whether it's through CSS, tables whatever I don't care, as long as it works and you guys would recommend the method
EDIT- Don't know how but I got the hang of it, it's now working with the code below :)
<style>
table.fix{
table-layout: fixed;
font-size: 90%;
}
.template{
border-style: solid;
border-color: grey;
height: 25px;
}
.left {
float: left;
}
.right {
float: right;
}
.box{
width: 530px;
height: 150px;
border-style: solid;
border-color: grey;
font-size: 90%;
}
.namebox{
border-style: solid;
border-color: grey;
}
<div style="width: 300px;" class="template left"><?php echo "<b>Subject: ",$subject,"</b>"; ?></div>
<div style="width: 223px;" class="template right"><?php echo $datesent; ?></div>
<div class="box"><?php echo $message; ?></div>
<div class="namebox"><?php echo "From: <a href='viewprofile.php?userid=$fromuser'>",$id2,"</a>"; ?></div>
<br /><center><input type='submit' name='reply' value='Reply' onclick="location.href='sendmail.php?user=<?php echo $fromuser; ?>&subject2=<?php echo $subject; ?>&replyto=<?php echo $id; ?>'" /></center>
If you want to use divs, you need to specify the class of a div.
<div>
<div>
<div class="head">Cost Per Shard</div>
<div class="head">Use</div>
<div class="head">How many shards?</div>
</div>
<div>
<div class="cont">1000 Gems</div>
<div class="cont">VIP Resource</div>
<div class="cont"><input type="text" name="gems2" /></div>
</div>
<div>
<div class="cont"></div>
<div class="cont"></div>
<div class="cont"><input type="submit" name="Trade2" value="Trade"/></div>
</div>
Then you must specify the classes:
.head
{
width: 33%;
display: inline-block;
color: orange;
font-weight: bold;
}
.cont
{
width: 33%;
display: inline-block;
color: white;
}
your CSS:
.text
{
style="color:white;
font-size: 0.8em";
}
.tablehead
{
color: orange;
font-weight: bold;
}
.teabledata
{
color: white;
}
your HTML
<form action="gemshop.php" method="post">
<table cellpadding="5" cellspacing="5">
<p class="text">Buy Shards</p>
<tr>
<td class="tablehead">Cost Per Shard</td>
<td class="tablehead">Use</td>
<td class="tablehead">How many shards?</td>
</tr>
<tr>
<td class="tablehead">1000 Gems</td>
<td class="tablehead">VIP Resource</td>
<td><input type="text" name="gems2" /></td>
</tr>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="Trade2" value="Trade"/></td>
</tr>
Hopes this answers your question...
I am having trouble centering my table in html as I am trying to create a web page for a class.
This is what I have entered into html:
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
However, whenever I try to add 'align' and 'width' in the attribute, it only affects my width. It doesn't center the table.
Does anyone know of a way to both center the table in the page while applying width?
Thank you. I can provide the markup of my html page if needed.
Try this:
<table style="margin:0px auto; width:500px">
However align is obsolete so you may try this:
table {
width:500px;
margin: 10px auto;
}
ie, give width to your table and set margin auto horizontal
just add this to your table
table {
text-align: center;
}
Live Demo
try to put it inside
<p align="center">
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</p>
Enclose your table in a wrapping div:
<div class="wrapper">
<table>
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div>
And then in your css file (if you want to centre the text too):
table {
text-align: center;
width: 50%
}
.wrapper {
margin: 0 auto;
}
You can't center an element without defining the width of its outside container. Let me show you a better way to set it up.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside-container {
width: 100%;
}
#form-container {
width: 50%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="outside-container">
<div id="form-container">
<table align="center">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div> <!-- CLOSE #form-container -->
</div> <!-- CLOSE #outside-container -->
</body>
</html>
How can entire table cell be hyperlinked in html without javascript or jquery?
I tried to put href in td tag itself but its not working at least in chrome 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Try this:
HTML:
<table width="200" border="1" class="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.
Try this way:
<td> </td>
Easy with onclick-function and a javascript link:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.
<td onclick="location.href='yourpage.html'">Link</td>
Here is my solution:
<td>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
td {
padding: 1%;
vertical-align: bottom;
position:relative;
a {
height: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
.item-container {
/*...*/
}
}
Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)
Problems:
(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;
(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...
My Suggestion to complete answer of (User: Christ):
HTML:
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
you can give an <a> tag the visual behavior of a table cell:
HTML:
<table>
<tr>
Cell 1
<td>Cell 2</td>
</tr>
</table>
CSS:
tr > a {
display: table-cell;
}
I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.
<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
<table style="margin-left: auto; margin-right: auto;" align="center">
<tr>
<td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
</tr>
</table>
</a>
If you want use this way in php Do the following
<?php
echo ("
<script type = 'text/javascript'>
function href() {
location.href='http://localhost/dept';
}
</script>
<tr onclick='href()'>
<td>$id</td>
<td>$deptValue</td>
<td> $month </td>
<td>100%</td>
</tr>
");
?>