I'm using Laravel version 5.7.20 to build a custom markdown template. The template is copied from /resources/views/vendor/notifications/email.blade.php
which is generated after issuing the command php artisan vendor:publish --tag=laravel-notifications.
The following works which displays HTML:
return (new MailMessage)
->line(new HtmlString('The <strong>introduction</strong> to the notification.'))
->line('The <strong>introduction</strong> to the notification.')
->line(new HtmlString('Due Date: <strong>' . Carbon::parse($this->info->created_at)->format('Y-m-d H:i') . '</strong>'))
->line('Due Date: <strong>' . Carbon::parse($this->info->created_at)->format('Y-m-d H:i') . '</strong>')
->action('Notification Action', url('/'));
This is not working. Which is using my own markdown
return (new MailMessage)
->line(new HtmlString('The <strong>introduction</strong> to the notification.'))
->line('The <strong>introduction</strong> to the notification.')
->line(new HtmlString('Due Date: <strong>' . Carbon::parse($this->info->created_at)->format('Y-m-d H:i').'</strong>'))
->line('Due Date: <strong>' . Carbon::parse($this->info->created_at)->format('Y-m-d H:i').'</strong>')
->action('Notification Action', url('/'))
->markdown('mail.notification.permission');
my mail.notification.permission file is copy exactly from laravel-project/resources/views/vendor/notifications/email.blade.php
I think I need view not a markdown. But I change ->view('mail.notification.permission'); I got error No hint path defined for [mail]. (View: /Users/shiro/Sites/laravel-project/resources/views/mail/notification/permission.blade.php)
which file I should copy in order for me using html, not the markup format.
I haven't see any solution in notification use ->view instead of ->markdown. Or what is the correct flow to display html in notification email?
OK, I found out the error.
If want to use ->view(), the blade template can't use #component('mail::message'), it have to build with fresh blade layout (Build you own view like normal page). Then you will not get No hint path defined for [mail] error.
Laravel Notification Mark Up a lot to learn their syntax and their eco system. It is great for those who want a simple notification. But if you want custom page, I would suggest to use view().
I share my layout blade file which I copy after I send out from mark down. The content part you have your own logic.
public function toMail($notifiable)
{
return (new MailMessage)
->subject('New Invoice')
->view( 'mail.notification.custom_invoice', ['invoice' => $this->invoice]);
{
email_layout.blade.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #f5f8fa; color: #74787E; height: 100%; hyphens: auto; line-height: 1.4; margin: 0; -moz-hyphens: auto; -ms-word-break: break-all; width: 100% !important; -webkit-hyphens: auto; -webkit-text-size-adjust: none; word-break: break-word;">
<style>
#media only screen and (max-width: 600px) {
.inner-body {
width: 100% !important;
}
.footer {
width: 100% !important;
}
}
#media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
<table class="wrapper" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #f5f8fa; margin: 0; padding: 0; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<tr>
<td align="center" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<table class="content" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; margin: 0; padding: 0; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<tr>
<td class="header" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 25px 0; text-align: center;">
<a href="{{ url('/') }}" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #bbbfc3; font-size: 19px; font-weight: bold; text-decoration: none; text-shadow: 0 1px 0 white;">
{{ config('app.name', 'Laravel') }}
</a>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="body" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #FFFFFF; border-bottom: 1px solid #EDEFF2; border-top: 1px solid #EDEFF2; margin: 0; padding: 0; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #FFFFFF; margin: 0 auto; padding: 0; width: 570px; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px;">
<!-- Body content -->
<tr>
<td class="content-cell" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 35px;">
#yield('content')
<p style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #74787E; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Regards,<br>{{ config('app.name', 'Laravel') }}</p>
#yield('subcopy')
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; margin: 0 auto; padding: 0; text-align: center; width: 570px; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px;">
<tr>
<td class="content-cell" align="center" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 35px;">
<p style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; line-height: 1.5em; margin-top: 0; color: #AEAEAE; font-size: 12px; text-align: center;">© {{ date('Y') }} {{ config('app.name', 'Laravel') }}. All rights reserved.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Related
Responsive Email Template doesn't show buttons and footer isn't aligned properly on outlook web. Attached is the code and screen shot of the result in outlook web and the desired output as displayed in gmail web. I need help in fixing it for outlook.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- For development, pass document through inliner -->
<!--<link rel="stylesheet" href="css/simple.css" />-->
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
line-height: 1.65; }
img {
max-width: 100%;
margin: 0 auto;
display: block; }
body,
.body-wrap {
width: 100% !important;
height: 100%;
background: #efefef;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none; }
a {
color: #f08414;
text-decoration: none; }
.text-center {
text-align: center; }
.text-right {
text-align: right; }
.text-left {
text-align: left; }
.button {
display: inline-block;
color: white;
background: #f6c095;
border: solid #f6c095;
border-width: 10px 20px 8px;
/*font-weight: bold;*/
border-radius: 4px; }
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
line-height: 1.25; }
h1 {
font-size: 25px; }
h2 {
font-size: 28px; }
h3 {
font-size: 24px; }
h4 {
font-size: 18px; }
h5 {
font-size: 16px; }
p, ul, ol {
font-size: 16px;
font-weight: normal;
margin-bottom: 20px; }
.container {
display: block !important;
clear: both !important;
margin: 0 auto !important;
max-width: 580px !important; }
.container table {
width: 100% !important;
border-collapse: collapse; }
.container .masthead {
padding: 80px 0;
background: #3d4a7c;
color: white; }
.container .masthead h1 {
margin: 0 auto !important;
max-width: 90%;
/*text-transform: uppercase;*/ }
.container .content {
background: white;
padding: 30px 35px; }
.container .content.footer {
background: none; }
.container .content.footer p {
margin-bottom: 0;
color: #888;
text-align: center;
font-size: 14px; }
.container .content.footer a {
color: #888;
text-decoration: none;
font-weight: bold; }
#contactmanager {
display: inline-block;
color: white;
background: #3d4a7c;
border: solid #3d4a7c;
border-width: 10px 20px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td class="container">
<!-- Message start -->
<br />
<table>
<tr>
<td align="center">
<img alt="accesbank-logo" src="images/accessbank.png"/>
</td>
</tr>
</table>
<br/>
</td>
</tr>
<tr>
<td class="container">
<!-- Message start -->
<table>
<tr>
<td align="center" class="masthead">
<h1>High Account Balance</h1>
</td>
</tr>
<tr>
<td class="content">
<h4>Dear Emmanuel Onyeje</h4>
<p>Access Bank Checking Account has a high balance of #X. Consider investing this in a higher yielding account such as a fixed/call deposit </p>
<p><em>– Bank Team</em>
</p>
<table>
<tr>
<td align="center">
<p>
Contact Account Manager
Ignore Advice
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="container">
<!-- Message start -->
<table>
<tr>
<td class="content footer" align="center">
<p>Copyright © 2016 Access Bank,Powered by Molib
</p>
<p>If you do not want to recieve emails from us, you can | Unsubscribe
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sounds like you need bulletproof email buttons! It's possible to get buttons like this email, but it requires more code than it would on the web / email clients with decent box model support:
<td align="center">
<!-- Button 1 : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
<tr>
<td style="border-radius: 4px; background: #f6c095; text-align: center;">
<a href="http://www.google.com" style="background: #f6c095; border: 10px 20px 8px 20px; solid #f6c095; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
Contact Account Manager
</a>
</td>
</tr>
</table>
<!-- Button 1 : END -->
<!-- Button 2 : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
<tr>
<td style="border-radius: 4px; background: #3d4a7c; text-align: center;">
<a href="http://www.google.com" style="background: #3d4a7c; border: 10px 20px 8px 20px; solid #3d4a7c; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
Ignore Advice
</a>
</td>
</tr>
</table>
<!-- Button 2 : END -->
</td>
This is one of a few similar techniques, outlined on Litmus.
For this, i use a table :
<table cellpadding="0" cellspacing="0" border="0" width="150" bgcolor="#000000" class="cta-black" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; border-collapse: collapse; mso-padding-alt: 0pt 0pt 0pt 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; background: #000000;">
<tbody>
<tr>
<td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;"> </td>
</tr>
<tr>
<td align="center" mc:edit="selection-1-cta" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">VOIR LE PRODUIT</td>
</tr>
<tr>
<td class="separator" height="10" style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;"> </td>
</tr>
</tbody>
</table>
I am trying to create a PDF that contains table which is partly filled, partly empty. To accomplish this I am using DomPDF via a Laravel wrapper.
It seems that DomPDF somehow miscalculates the height of the empty cells and also displaces the table grid and content.
Here is a minimal broken example:
<html>
<head>
<style>
html, body {
font-family: DejaVu Sans;
}
table {
border-collapse: collapse;
border: none;
margin: 0;
width: 100%;
}
table.main td {
padding: 0;
border: 2px solid black;
}
.main table td {
border: 1px black solid;
text-align: center;
font-size: 10px;
height: 14px;
}
</style>
</head>
<body>
<table class="main">
<tr>
<td>
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</table>
</td>
<td>
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This is how that table looks like in the generated PDF:
I have tried to add min-height and max-height for the table cell, but no results, it still randomly misaligns everything.
It turns out that this requires line-height to be set exactly equal to the font size. This will work:
.main table td {
border: 1px black solid;
text-align: center;
font-size: 10px;
line-height: 10px;
height: 14px;
}
I've tried everything I can think of, but I cannot get the whitespace between cells to show in Outlook 2013. This is being sent from NationBuilder. How do I add cellspacing so that it renders in Outlook?
Thank you!
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in --> <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS --> <title>NationBuilder</title> <style type="text/css"> body {
background-color: #ffffff;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-family: 'Palatino Linotype', serif;
}
body {
color: #333333;
margin: 0;
padding: 0;
}
A:link {
color: #2594aa;
text-decoration: none
}
A:visited {
color: #2594aa;
text-decoration: none
}
A:active {
color: #2594aa;
text-decoration: none
}
table {
border-spacing: 0;
border-collapse: collapse;
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
#bodytable {
border-spacing: 10;
border-collapse: sepatate;
}
#bodytable td {
border-collapse: separate;
}
p {
font-family: chaparral-pro, Helvetica, Arial, sans-serif;
margin-bottom: 8px;
margin-top: 5px;
}
.body-content img {
max-width: 100%;
}
ul {
font-family: font-family: chaparral-pro, Helvetica, Arial, sans-serif;
text-align: left;
}
h1 {
margin-top: 35px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 20pt;
color: #e37c00;
font-family: 'Trebuchet MS', sans-serif;
text-transform: uppercase
}
h2 {
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 14pt;
color: #c8d300;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize
}
h3 {
margin-bottom: 0px;
margin-top: 10px;
font-weight: bold;
text-align: left;
font-size: 12pt;
color: #000000;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize;
text-decoration: underline
}
dt {
font-weight: bold;
margin-top: 10px;
margin-bottom: 6px;
}
/* Constrain email width for small screens */
#media screen and (max-width: 600px) {
table[class="container"] {
width: 100%!important;
}
}
/* Give content more room on mobile */
#media screen and (max-width: 480px) {
table[class="container"] {
width: 100%!important;
}
div[class="body-content"]img {
width: 100%;
}
}
/* Styles for forcing columns to rows */
#media only screen and (max-width: 600px) {
/* force container columns to (horizontal) blocks */
table[class="container"] {
width: 100%!important;
}
}
</style> </head> <body style="margin:0; padding:0;" bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- 100% wrapper --> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td align="center" valign="top" bgcolor="#ffffff"> <!-- header --> <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#2594aa;"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td width="600" style="padding:20px; font-family:chaparral-pro,Helvetica,Arial,sans-serif;" valign="middle" height="100"> <img src="{{ settings.site.meta_image_url }}" alt="{{ settings.official_name }}" width="120" height="auto" border="0" valign="middle" style="vertical-align:middle;"> <a style="color:#000000;font-weight:bold;text-decoration:none;padding:20px;font-size:28px;" href="{{ settings.site.full_url }}"> {
{
settings.official_name
}
}
</a> </td> </tr> </table> </td> </tr> </table> <!-- ### 600PX CONTAINER ### --> <table style="font-size: 14px;" width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding: 20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;" bgcolor="#ffffff" class="body-content"> {
{
body
}
}
</td> </tr> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding:20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;"> {
{
settings.official_name
}
}
{
% if settings.has_address? %
}
·
{
{
settings.address.one_line
}
}
{
% endif %
}
<br/>This email was sent to <a style="color:#505054;" href="{{ recipient.email }}"> {
{
recipient.email
}
}
</a>. To stop receiving emails,
<a style="color:#505054;" href="{{ settings.site.unsubscribe_url }}">click here</a>. <br/><b>Don't forget to like us on Facebook!</b>
<br/>You can also keep up with {
{
broadcaster.name
}
}
on Twitter,
Facebook or Instagram. </td> </tr> </table> <p style="text-align:center;margin: 20px 40px; font-size: 0.8em;font-family:Helvetica,Arial,sans-serif;">Created with NationBuilder,
software for leaders.</p> <!-- ### 600PX CONTAINER ### --> </td> </tr> </table> <!--/100% wrapper--> </body> </html>
<html>
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>{{ recipient.first_name_or_friend }} --
<h1 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">The
Rogers Park Food Co-op has some exciting upcoming events!</h1>
<table id="bodytable" border="0" cellspacing="10" cellpadding="20" width="100%" style="border-spacing: 10px !important; border-collapse: separate !important; background-color:#ffffff;">
<tbody>
<tr>
<td style="background-color: #f8febf; border-collapse:seperate !important;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Berger Park Sustainability Open House
</h2>
<p>
<strong>Date: April 22, 2016 from 7 - 8:30pm</strong>
<br />
<strong>Location:
Berger Park Cultural Center
<br />
6205 N Sheridan Rd</strong>
</p>
<p>
Come celebrate the renovation of Berger Park,s south lawn! The architects plan will be unveiled. Also, Edgewater organizations committed to sustainability will have presentation tables. Share your ideas for other improvements to your park.
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/177/attachments/original/1460228200/April_22BergerPark2016-SustainOpenHouse.pdf?1460228200">
<img align="right" style="margin: 6px 1px; border: 1px solid black; float: right;" title="BergerSmall.gif" src="BergerSmall.gif" alt="BergerSmall.gif" width="100" height="129" />
</a>
<p>Presentation Tables:</p>Berger Park South Lawn Renovation
<br />Loyola Sustainability Institute Student sustainability projects
<br />Edgewater Environmental Sustainability Project
<br />Monarch butterfly project at Berger Park
<br />LetsGOChicago
<br />Rogers Park Food Co-op
<br />Free Little Libraries
<p>Please RSVP at
https://nextdoor.com/events/il/chicago/earth-month-at-berger-park-sustainability-open-house-581265
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Meet the Farmers
</h2>
<p>
<strong>Date:
April 27, 2016 at 5pm - 7pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/174/attachments/original/1458565305/Meet_the_Farmers.jpg?1458565305">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="MeettheFarmers_sm.jpg" src="MeettheFarmers_sm.jpg" alt="MeettheFarmers_sm.jpg" width="100" height="155" />
</a>
<p>FREE EVENT!</p>
<p>Get some face-time with the local farmers who supply the best Chicago restaurants and Farmers Markets!</p>
<p>Learn about where your food comes from by talking to the people who grow it!</p>
<p>Get 10% off Dinner from Uncommon Ground!</p>
<p>Stay for live musicfrom 8-10 pm.</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Farm Fresh Jams
</h2>
<p>
<strong>Date:
April 27, 2016 at 8pm - 10pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="FarmFresh_sm.jpg" src="FarmFresh_sm.jpg" alt="FarmFresh_sm.jpg" width="100" />
</a>
<p>Fundraiser Concert for the Rogers Park Food Co-op</p>
<p>
<strong>Featuring performances by:</strong>
</p>
<p>Signal-to-Noise</p>
<p>Luna Blu</p>
<p>Abbie & Marlon</p>
<p>Abud: A Bard.</p>
<p>
<strong>Get 10% off Dinner from Uncommon Ground!</strong>
</p>
<p></p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Moah's Ark 4th Annual Plant Sale
</h2>
<p>
<strong>Date:May 7th and 8th</strong>
<br />
<strong>Location:Moah's ark</strong>
<br />
<strong>1839 W Touhy Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="moah.jpg" src="moah.jpg" alt="moah.jpg" width="250" height="188" />
</a>
<p>Our 4th annual plant sale will feature a big variety of heirloom tomatoes and peppers, plus herbs, flowers and more.
</p>
<p>We have several new tomatoes, including 7 varieties of dwarf heirlooms, old favorites like the cherokee purple, green and chocolate, Moah's yellow, and a couple new italian imports.</p>
<p>This is a 2 day event, Saturday and Sunday, which is Mother's Day. Mom's get a free plant.</p>
<p>RSVP to this event so that you will be notified of the full list which i will be putting up soon.</p>
<p>Happy spring!!</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td>
<h2 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">
Click Here For Full Event Listing
</h2>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Exclusive Offers for Co-op Owners!</h2>
<p>In our effort to provide value for our Owners, the Rogers Park Food Co-op is excited to offer the following exclusive deals for owners!</p>
<h3>$50 Discount to Natures Farm Camp</h3>
<p>To celebrate their love of Co-ops, Nature's Farm Camps has decided to offer a $50.00 discount for Natures Farm Camp registrations to the Chicago-area food cooperative members.</p>
<p>
<em>
<strong>Owners will receive a coupon code in an upcoming email.</strong>
</em>
</p>
<p>From naturesfarmcamp.com:</p>
<blockquote>We are an overnight summer camp where kids (ages 8-14) step out of their every day and immerse themselves in nature growing, foraging, cooking, making, building and exploring. Campers do with their hands, head and heart. In the process they
discover more about life and themselves, all while having a blast with new friends in the great outdoors.
</blockquote>
<hr />
<h3>Biggest Slim-Down with Hank: Help The Co-op While Getting Fit!</h3>
<p>Every few months, personal trainer Hank Rouse and his team of coaches run a Biggest Slim Down Contest. This past Holiday Season we had a Maintain Don't Gain Contest. To win cash prizes, all the contestants had to do was maintain their weight
(or even lose weight). I'm so excited to announce an Exclusive Opportunity for RPFC Co-Owners.</p>$25 will be donated to the Rogers Park Food Co-op for each participating Co-Owner who achieves the 3% Body Weight (Loss/Gain) benchmark.
<p>NEW Contest: Begins April 18th</p>
<p>Applications accepted until April 13th.</p>More Information at
http://www.facebook.com/events/495659513953786/
<br />
</td>
</tr>
</tbody>
</table>{{ broadcaster.name }}
<br />
{{ settings.site.full_url }}
</body>
</html>
Here is the HTML: https://jsfiddle.net/63v8cra7/1/
Screenshot from Thunderbird:
From Outlook:
I am trying to get my images in my table datas to line up across the table, but when there is multi line h5 I am struggling to figure out how to get them to line up. Its almost as if the text is like linked to the image and h6 in a way.
Here is the code http://codepen.io/anon/pen/XbpzJa
td img {
width: 25px;
height: 25px;
float: left;
margin: 2px;
display: inline-block;
}
If I understood correctly - you simply need to add vertical-align: top to TDs:
td {
width: 100px;
height: auto;
vertical-align: top;
}
td img {
width: 25px;
height: 25px;
float: left;
margin: 2px;
display: inline-block;
}
td h6 {
display: inline;
}
table h5 {
width: 100%;
padding-top: 5px;
padding: 0;
margin-top: 5px;
margin: 0;
position: relative;
display: block;
clear: both;
}
<table>
<tbody>
<tr>
<td>
<img src="icon.png" />
<h6>(Text one)</h6>
<h5>Textline Two</h5>
</td>
<td>
<img src="icon.png" />
<h6>(Text Two)</h6>
<h5>Long textline two long</h5>
</td>
<td>
<img src="icon.png" />
<h6>(Text one)</h6>
<h5>Textline Two</h5>
</td>
</tr>
</tbody>
</table>
I was wondering how to insert a <DIV> tag in between the pagination bar
and the actual TABLE that starts the results display if I have the
pagination bar at the top. If I just put the <DIV> tag right before my
display:table, it also includes the pagination stuff inside the scroll bar.
Also, I cannot figure out how to set the style to TBODY as it is a little bit
confusing. I am not sure if you guys wrote this stuff but can you advise me
if you have any idea how to achieve this.
and my code is
<display:table id="data1" name="invprbmList" requestURI="" pagesize="10" export="true" style="width:100%;" decorator="org.displaytag.decorator.TotalTableDecorator">
<tr><td><display:setProperty name="paging.banner.item_name">Invoice</display:setProperty>
<display:setProperty name="paging.banner.items_name">Invoices</display:setProperty>
<display:setProperty name="paging.banner.some_items_found"><span class="pagebanner"> {0} Invoices found, displaying {2} to {3}. </span></display:setProperty>
<bean:define id="invoiceNo"><bean:write name="data1" property="invoiceNo"/></bean:define>
<bean:define id="notes"><bean:write name="data1" property="notes"/></bean:define>
<bean:define id="strFlag"><bean:write name="data1" property="strFlag"></bean:write></bean:define>
<display:column title="Invoice No." sortable="true" property="invoiceNo" media="xml csv pdf excel" class="l" headerClass="hl" />
<display:column property="invDate" title="Invoice Date" format="{0,date,dd-MMM-yyyy}" sortable="true" class="l" headerClass="hl"/>
<display:column media="html" title="Amount" property="invAmount" format="<%=strDispCurrency %>" sortable="true" class="r" headerClass="hr" />
<display:column title="Amount" sortable="true" property="invAmount" media="xml csv pdf excel" class="r" headerClass="hr" />
<display:column property="dueDate" title="Due Date" format="{0,date,dd-MMM-yyyy}" sortable="true" class="l" headerClass="hl"/>
<display:column media="html" title="Balance" property="balance" format="<%=strDispCurrency %>" sortable="true" class="r" headerClass="hr" />
<display:column title="Balance" sortable="true" property="balance" media="xml csv pdf excel" class="r" headerClass="hr" />
<display:column title="Notes" sortable="true" property="notes" media="xml csv pdf excel" class="c" headerClass="hc"/>
<display:column property="invPoNum" title="P.O. No." sortable="true" class="l" headerClass="hl"/>
<display:column property="invRefNo" title="Ref. No." sortable="true" class="lbr" headerClass="hlbr"/>
<display:column property="status" title="Status" sortable="true" class="l" headerClass="hl"/>
</td></tr>
</display:table>
Create a CSS class locked-column.css as:
div#tbl-container {
width: 740px;
/* default value will be overrided by minimum of table width or screen
resolution*/
height: 300px;
margin-top: -11px;
overflow: auto;
/*
scrollbar-base-color: #ffeaff;
*/
}
.dataTable { /*table-layout: fixed; */
border-collapse: collapse;
/* background-color: WhiteSmoke; */
}
.dataTable th {
top: expression(document . getElementById("tbl-container") . scrollTop-2
); /* IE5+ only */
z-index: 20;
font-size: small;
padding: 5px 5px 5px 5px !important;
text-align: center;
position: relative;
cursor: default;
font-family: sans-serif;
font-size: small;
font-weight: bold;
background-color: #BBCCFF;
color: #FFFFF;
}
.dataTable thead tr {
position: relative;
height: 10px;
/*background-color: #7CA4E0;*/
}
.dataTable th a:link,th a:visited {
color: #1155cc;
font-weight: bold;
text-decoration: none;
font-family: sans-serif;
}
.dataTable a:hover {
color: #1155cc;
text-decoration: underline;
font-family: sans-serif;
font-weight: bold;
}
.dataTable thead th.sorted A {
font-weight: bolder;
}
.dataTable td {
padding: 3px 3px 3px 3px !important;
}
.dataTable tbody tr {
height: auto;
white-space: nowrap;
}
.dataTable tbody tr.odd {
background-color: #FFFFFF;
font-size: x-small;
}
.dataTable tbody tr.tableRowEven,tr.even {
background-color: #DDE5FF;
font-size: x-small;
}
.dataTable tbody tr td:last-child { /* padding-right: 20px; */
}
/*these styles have nothing to do with the locked column*/
.dataTable body {
background-color: white;
color: black;
font-family: sans-serif;
}
.dataTable tbody td {
padding: 2px 4px 2px 4px !important;
font-family: sans-serif;
font-size: x-small;
}
.exportlinks {
font-family: sans-serif;
}
/* style sheet to display light blue color for a mouse on row over event */
.dataTable tr.rowMouseOver {
color: white;
background-repeat: repeat-x;
background-color: rgb(228, 59, 47); /*#8888FF;*/
}
.dataTable .order1 {
background-position: right 50%;
background-image: url('../Images/arrow_up.gif');
background-repeat: no-repeat;
font-weight: bold;
}
.dataTable .order2 {
background-position: right 50%;
background-image: url('../Images/arrow_down.gif');
background-repeat: no-repeat;
font-weight: bold;
}
span.export {
padding: 0 4px 1px 20px;
font-size: x-small;
text-align: center;
}
span.excel {
background-image: url('../Images/ico_file_excel.png');
background-repeat: no-repeat;
width: 16px;
}
span.csv {
background-image: url('../Images/ico_file_csv.png');
background-repeat: no-repeat;
width: 16px;
}
span.xml {
background-image: url('../Images/ico_file_xml.png');
background-repeat: no-repeat;
width: 16px;
}
span.first {
background-image: url('../Images/first.jpg');
background-repeat: no-repeat;
width: 16px;
}
span.last {
background-image: url('../Images/last.jpg');
background-repeat: no-repeat;
width: 16px;
}
span.pdf {
background-image: url('../Images/ico_file_pdf.png');
background-repeat: no-repeat;
width: 16px;
}
span.rtf {
background-image: url('../Images/ico_file_rtf.png');
background-repeat: no-repeat;
width: 16px;
}
.rightAlignedPadded {
text-align: right;
padding-right: 10px;
}
call this CSS class in your JSP's JavaScript:
if(navigator.appName == 'Microsoft Internet Explorer')
{
document.write('<link rel="stylesheet" type="text/css" href="css/locked-column.css" />');
}
else
{
document.write('<link rel="stylesheet" type="text/css" href="css/displaytag1.css" />');
}
and make your display-tag as:
<table>
<tr><td>
<div id="tbl-container" style="width: 850px;">
<display:table name="CustomerList" export="true" id="customerList" class="dataTable" defaultorder="ascending" cellspacing="1" requestURI="" frame="true" decorator="org.displaytag.decorator.TotalTableDecorator">
<display:setProperty name="export.pdf.filename" value="OverallOverdue.pdf" />
<display:setProperty name="export.excel.filename" value="OverallOverdue.xls" />
<display:setProperty name="export.csv" value="true" />
<display:setProperty name="export.csv.filename" value="OverallOverdue.csv" />
<display:setProperty name="export.xml" value="true" />
<display:setProperty name="export.xml.filename" value="OverallOverdue.xml" />
<display:setProperty name="paging.banner.placement">top</display:setProperty>
.........
</display:table></div> </td></tr>
<tr><td> </td></tr>
<tr><td>
<div id="export-links">
</div>
</td>
</tr>
</table>
If it is included in scrollable, put:
<div id="export-links">
</div>
outside <table>
You can't have a non-scrollable element inside scrollable table. Maybe you could define that element as absolute position, and to make it like that, but I wouldn't recommend that.
With your code try like this:
<table>
<tr><td>
<div id="tbl-container" style="width: 850px;">
<display:table name="CustomerList" export="true" id="customerList" class="dataTable" defaultorder="ascending" cellspacing="1" requestURI="" frame="true" decorator="org.displaytag.decorator.TotalTableDecorator">
<display:setProperty name="export.pdf.filename" value="OverallOverdue.pdf" />
<display:setProperty name="export.excel.filename" value="OverallOverdue.xls" />
<display:setProperty name="export.csv" value="true" />
<display:setProperty name="export.csv.filename" value="OverallOverdue.csv" />
<display:setProperty name="export.xml" value="true" />
<display:setProperty name="export.xml.filename" value="OverallOverdue.xml" />
<display:setProperty name="paging.banner.placement">top</display:setProperty>
.........
</display:table></div> </td></tr>
<tr><td> </td></tr>
<tr><td>
</td>
</tr>
</table>
<div id="export-links">
your links here
</div>
That way it will not be included in table that are scrolled
Take a look at this example I made:
http://jsfiddle.net/LQJY5/
download flexcroll.js and flexcrollstyles.css from http://www.hesido.com/web.php?page=customscrollbar and include these files.
<table>
<tr>
<td width='100%'> Paging: </td>
</tr>
<tr>
<td>
<div id='customscroll' class='flexcroll' style='height:300px;'>
<table>
<tr>
<td>Your content</td>
</tr>
</table>
</div>
</td>
</tr>
</table>