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>
Related
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>
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;
}
After reading many articles, I can't seem to find an answer as to why my images have no margin on the right side and my table paragraph text gets cut off on the right side. The paragraph text is fine on my other pages, just in the table it gets cut off.
This is all using css3 media queries responsive design. This happened to another site I built for a client. Any insight would be greatly appreciated!
Thanks!
Here is my css media query for the phone screen:
#charset "utf-8";
#import url("phone.css") only screen and (max-width:320px);
container {
width: 100%;
height: 100%;
}
#header img {
position: relative;
height: auto;
width: auto;
max-height:100%;
max-width:100%;
min-height:100%;
min-width:100%;
overflow:hidden;
}
#navigation {
font-size:large;
height: auto;
width:100%;
float:none;
overflow:hidden;
}
#menu {
float:none;
margin:0px;
display:none;
width:100%;
position:relative;
list-style-type:none;
}
.nav-btn {
width:100%;
background-color:#09F;
text-align:center;
box-sizing:border-box;
padding:15px 10px;
font-weight:bold;
font-size:large;
text-align:center;
cursor:pointer;
display:block;
height:100%;
}
.nav-btn:after {
content:url(images/mobilemenu.png);
}
#menu li {
width:100%;
font-size:large;
font-weight:bold;
background-color:#09F;
display:block;
margin:0px;
border:#000 medium solid;
float:none;
overflow:hidden;
text-align:center;
}
#menu img {
margin:0px;
padding:0px;
width:90px;
height:90px;
position:relative;
}
#navigation ul li {
margin:0px;
width:100%;
position:relative;
float:none;
overflow:hidden;
}
#menu li a {
width:100%;
display:block;
}
#content {
width:100%;
height:100%;
}
.socialmedia {
width:30px;
height:30px;
max-width:30px;
max-height:30px;
}
.bigfoot {
width:50px;
height:50px;
max-width:200px;
max-height:200px;
}
#content img {
height:auto;
width:100%;
position:relative;
overflow:hidden;
margin:5px;
}
#content table, tbody, th, td, tr {
display:block;
}
#content table {
border-collapse: collapse;
width: 100%;
height: auto;
padding: 10px;
position: relative;
min-width:320px;
}
#content td p {
position: relative;
margin: auto;
text-align: center;
padding: 5px;
min-width: 100%;
min-height: 100%;
}
#content tr {
position:relative;
width:100%;
height:auto;
overflow:hidden;
}
#content td {
position:relative;
width:100%;
height:auto;
min-width:100%;
min-height:100%;
overflow:hidden;
}
#content tr td img {
width:100%;
height:auto;
max-height:250px;
max-width:250px;
}
#footer {
width:100%;
height:100%;
}
And my html for the page:
<div style="background-image:url(images/beer%20content%20background2.jpg)" id="content">
<h1 align="center">Our Beers</h1>
<p>
<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>
<img src="images/Alberts_Web.png" alt="albert's ale" width="350"/>
<p>Albert's Ale is a German inspired beer with a crisp malt base, and 2 varieties of hops. This pale ale is hoppy, and a real refreshing thirst quencher. Enjoy year round! <br />6% Alcohol.</p>
</td>
<td>
<img src="images/Hieroglyph_Web.png" alt="Hieroglyph"width="350"/>
<p> Hieroglyph is a double IPA. 8% Alcohol.</p>
</td>
</tr>
<tr>
<td>
<img src="images/Trapezeious_Web.png" alt="Trapezious" width="350"/>
</td>
<td>
<img src="images/Sifu_Web.png" alt="Sifu" width="350"/>
</td>
</tr>
</table>
<h2 align="center">Occasional & Seasonal brews</h2>
<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>
<img src="images/Krock'd_Web.png" alt="Krock'd" width="350"/>
</td>
<td>
<img src="images/Viking_Web.png" alt="I Wish I was a Viking" width="350"/>
</td>
</tr>
<tr>
<td>
<img src="images/Fat Bobby_Web.png" alt="Fat Bobby" width="350"/>
</td>
<td> </td>
</tr>
</table>
</p>
<br />
<p align="center">Check out our upcoming events where we will be sampling our beer!</p>
<p align="center">Cheers!</p>
</div>
<!-- InstanceEndEditable -->
</div>
</body>
<!-- InstanceEnd --></html>
A quick note, I did apply the viewport meta tag on all of my pages to initial scale 1.0.
First of all: There are no media queries in the code you posted...
Apart from that: Although in the CSS you define the width for your tables as 100%, you have inline settings that give the tables 550px width:
<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
I suppose that's the reason for them not fitting on a mobile screen. Erase all that inline stuff that interferes with the CSS.
Similarly with images...
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>