PDF Press
ExpressionEngine 2, ExpressionEngine 3, ExpressionEngine 4, ExpressionEngine 5, ExpressionEngine 6
Back to this add-on's main page
View Other Add-ons From Doug Black, Jr.
CSS for PDF PRESS
Support Request
|
cooperdjm
|
| Posted: 01 December 2017 09:46 PM |
|
|
|
|
I have created a Template for the PDF Press.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="http://ovisit.ovi.resort/css/pdf.css" media="pdf">
<link rel="stylesheet" href="http://ovisit.ovi.resort/css/pdf.css" media="print">
<link rel="stylesheet" href="http://ovisit.ovi.resort/css/pdf.css" media="screen">
{exp:channel:entries channel="showmeknowme" dynamic="yes" show_expired="yes" show_future_entries="yes" entry_id="{segment_3}" return=""} <title>{title}-{entry_date format="%F %d %Y"}</title>{/exp:channel:entries}
</head>
<body>
{exp:channel:entries channel="showmeknowme" dynamic="yes" show_expired="yes" show_future_entries="yes" entry_id="{segment_3}" return=""}
<div class="container">
<div class="left">
{smkm_pictures}<img src="{image:url:medium}" alt="">{/smkm_pictures}
</div>
<div class="right">
<p>{title} : {smkm_short_description}</p>
<p> Check In Date: {entry_date format="%F %d %Y"}</p>
<p>Check In Time: {check_in_time}</p>
<p>Check Out Date: {expiration_date format="%F %d %Y"}</p>
<p>Room #: {room1}</p>
<p>About</p>
{smkm_long_description}
</div>
</div>
{/exp:channel:entries}
</body>
</html>
A browser displays it fine but the PDF Preview has all the elements but the layout is wrong. The images (4 of them) Should display on the left of the page the text on the right. But the images go in a line across the top of the page behind text.
This is the Style Sheet
@page {
margin: 7px; }
body {
margin: 7px; }
.container {
width: 800px;
}
.left {
display: inline-block;
width: 200px;
float: left;
}
.right {
display: inline-block;
width: 600px;
float: right;
}
img {
width: 195px;
}
I dont know where I am going wrong. Any tips appreciated.
|
|
|
|
|
cooperdjm
|
| Posted: 02 December 2017 06:29 PM |
# 1
|
|
|
|
SOLVED…started from scratch with css and got it working…
|
|
|
|
|
patpohler
|
| Posted: 04 December 2017 11:26 AM |
# 2
|
|
|
Developer
|
Glad you got it sorted out! Btw here’s a list of CSS compatible features w/ dompdf (our html to pdf library) for reference: https://github.com/dompdf/dompdf/wiki/CSSCompatibility
|
|
|
|
