I've created an email template and this email gets sent to outlook 2010 from my application(Oracle UCM).Issue is my workflow history table (code below) gets distorted and moves to left when checked on any mobile device However the entire email looks good when seen on a desktop.
<table border="1"cellspacing=0 cellpadding=0 width="95%" align="center">
<tr>
<td align="center" colspan="2" style='width:10.0%; background:#A5CEF7'>
<p><span style='font-size:18.0pt;font-family:"Calibri","sans-serif";color:red'>DMS</span><span style='font-size:15.0pt;font-family:"Calibri","sans-serif";color:red'> - <$xSubDocType$> document for <$xClientName$> PID: <$xProject_ID$> is in your workflow </span></p>
</td>
</tr>
<tr>
<td align="left" colspan="2" style='width:10.0%;font-family:"Calibri","sans-serif";background:#A5CEF7;font-size:12.0pt'>
<p>
<b>
Click on Approve or
Reject to take action on this document through email.Please remove your signatures(if any)</b><br><br>
</span>
<span style='font-size:10.0pt;font-family:"Calibri","sans-serif";color:red;align="center"'>** Please note: Do not make any changes</span>
</p>
</td>
</tr>
<tr>
<td rowspan="2" width="40%";height="1000" style='background:#E6E6D8;min-width:200px'>
<p style="padding-left:10px">
<span style='font-size:12pt;font-family:Calibri,sans-serif;color:black;font-weight:bold;left:500px'>
<b><u>Content Info</u> </b></span><br>
<br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Content ID: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$dDocName$></span><br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Document Owner: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$UserFullName$></span><br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Client: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$xClientName$></span><br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Project Name </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$xProjectName$></span><br>
</p>
<p style="font-family:Calibri,sans-serif;font-size:10pt;padding-left:15px">
<$if IsNotifyOnly or wfAction like "APPROVE"$>
[ <a href="<$HttpCgiPath$>?IdcService=DOC_INFO&idcToken=<$idcToken$>&dID=<$dID$>&dDocName=<$url(dDocName)$>&Auth=Intranet" style="color:993333;width:300px;font-family:Calibri,sans-serif;font-weight:normal">
<$lc("wwDocumentInfo")$></a> ]</p>
<$else$>
[ <a href="<$HttpCgiPath$>?IdcService=REVIEW_WORKFLOW_DOC&idcToken=<$idcToken$>&dDocName=<$url(dDocName)$>&Auth=Intranet" style="color:993333;width:300px;font-family:Calibri,sans-serif;font-weight:normal">
<$lc("wwWfReviewWorkflowItem")$></a> ]</p>
<$endif$>
</td>
</tr>
<tr>
<td align ="center" vertical-align="top" width="60%" style='background:#E6E6D8;min-width:600px'>
<p style="padding-left:10px">
<!-- <td align ="center" vertical-align="top" width="60%" bgcolor="#E6E6D8"> -->
<div style="display:none">
<$executeService("GET_SENDTOWORKFLOW_HISTORY_EMAIL_DETAILS")$>
<$numrowSTOWFH = rsNumRows("SendtoWorkflowActionHistory")$>
<$executeService("GET_WORKFLOW_HISTORY_EMAIL_DETAILS")$>
<$numrowWFH = rsNumRows("WorkflowActionHistory")$>
<$if numrowWFH gt 0$>
<$rsRename("WorkflowActionHistory", "rsNewName")$>
<$else$>
<$rsRename("SendtoWorkflowActionHistory", "rsNewName")$>
<$endif$>
</div>
<span style="font-family:Calibri,sans-serif;font-size:12pt">
<b>Reason: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:12pt;color:blue">
<b><$if xPurposeForSubmission$><$getFieldViewValue("xPurposeForSubmission",xPurposeForSubmission,"Reason")$><$endif$></span></b><br><br>
<table style="position:absolute;width:97.0%;left:145px" cellpadding="3" cellspacing="0" id="Table2">
<tr>
<td style="font-family:Calibri,sans-serif;font-size:12pt" colspan="7">
<b>Recent workflow history (Maximum Last 5)</b>
</td>
</tr>
<tr>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:130px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action Date</b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:140px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action By </b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:70px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action </b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:150px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action Type </b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:250;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Comments</b></span></div>
</td>
</tr>
<$loop rsNewName$>
<tr>
<!-- ACTION DATE cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:130px;height:1px;">
<div class="xuiListCellDivCenter" nowrap><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$dActionDate$> </span></div>
</td>
<!--Send To cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:100px;height:1px;">
<div class="xuiListCellDivCenter" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$if strLength(getValueForSpecifiedUser(xWF_SendTo, "dFullName")) gt 0 $>
<$getValueForSpecifiedUser(xWF_SendTo, "dFullName")$>
<$else$>
<$xWF_SendTo$>
<$endif$> </span></div>
</td>
<!-- ACTION cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:70px;height:1px;">
<div class="xuiListCellDivCenter" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$dAction$> </span></div>
</td>
<!-- Approval Type cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:150px;height:1px;">
<div class="xuiListCellDiv" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal"><$ApprovalType$> </span></div>
</td>
<!-- Comments cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:250px;height:1px;">
<div class="xuiListCellDiv" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal"><$strSubstring(xWorkflowComments,0,100)$> </span> </div>
</td>
</tr>
<$endloop$>
<tr>
<td colspan="2">
[<a href="<$HttpCgiPath$>?IdcService=GET_WORKFLOW_HISTORY_BYNAME&idcToken=<$idcToken$>&dID=<$url(dID)$>&dDocName=<$url(dDocName)$>" style="color:993333;width:50px;font-size:10pt;font-family:Calibri,sans-serif;font-weight:normal">
<$lc("View detailed workflow history")$></a>]
</td>
</tr>
</table>
</td>
</tr>
</table>
position:absolute; set at line 80 caused the table to take a fixed position and hence the issue.
also height="1000" set further set the column's height.Removed it and I'm happy now
Please remove rowspan="2" from below td, There should not be rowspan.
HTML
<td rowspan="2" width="40%" ;height="1000" style="background:#E6E6D8;min-width:200px">
Related
I have seen many posts, but couldn't find the right solution. If you have used flying saucer 9 in POM.xml this is the issue with PDF. Can we solve it with css?
Tried a lot but its not working in HTML its good.
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16882">
<div class="caption">
<br>Instructions
</div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1" summary="Instruction" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="1" rowspan="2" class="edit">
<span style="font-size: 20; color:blue; " id=C ol197626>
<b>
The 50 States, District of Columbia, and the
Commonwealth of Puerto Rico and other
territories a Modernizas report is not
considered to be confidential.
<br>
</b>
</span>
</td>
</tr>
</table>
</div>
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16883">
<div class="caption"></div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1" summary="Estimated Figures" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="2" rowspan="1" class="edit">
<span id=C ol197627><b>
</a> Click
<a ref="http://www.acf.hhs.gov/programs/ocs/resource/funding-
applications" target="_blank">HERE</a>
to read the expandctions.
<br><br>
<A>
</b>
</td>
</tr>
<tr>
<td valign="top" colspan = "1" rowspan = "1" width = "74%" class="edit">
<span id = Col197628>
<b>
</A>
Do the data below figures?<br>
If YEpf assistance that has
at least one estimated data entry.
<A>
</b>
</td>
<td valign="top" colspan = "1" rowspan = "1" width = "26%" class="edit">
<span id = Col197629><b></A>Select One<A><br></b>
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
Yes
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
No
</span>
</td>
</tr>
</table>
</div>
the html could do with some fixing do that first,
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16882">
<div class="caption">
<br>Instructions <!-- br should be self closing-->
</div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1"
summary="Instruction" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="1" rowspan="2" class="edit">
<span style="font-size: 20; color:blue; " id=C ol197626> <!-- id is not in quotes-->
<b>
The 50 States, District of Columbia, and the
Commonwealth of Puerto Rico and other
territories a Modernizas report is not
considered to be confidential.
<br> <!-- should be self closing-->
</b>
</span>
</td>
</tr>
</table>
</div>
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16883">
<div class="caption"></div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1"
summary="Estimated Figures" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="2" rowspan="1" class="edit">
<span id=C ol197627> <!-- id is not in quotes where is the close of span-->
<b>
</a> Click <!-- this is a end and should be a start also you have double wrapoped the a which should not be done. (anchor anchor double anchor does not make much sense)-->
<a ref="http://www.acf.hhs.gov/programs/ocs/resource/funding-
applications" target="_blank">HERE</a>
to read the expandctions.
<br><br>
<A> <!-- should be lower case and should be an end, see above-->
</b>
</td>
</tr>
<tr>
<td valign="top" colspan = "1" rowspan = "1" width = "74%" class="edit">
<span id = Col197628> <!-- id is not in quotes where is the close of span-->
<b>
</A> <!-- should be lower case, a start not an end-->
Do the data below figures?<br>
If YEpf assistance that has
at least one estimated data entry.
<A> <!-- should be lower case should be a end and not a start-->
</b>
</td>
<td valign="top" colspan = "1" rowspan = "1" width = "26%" class="edit">
<span id = Col197629> <!-- id is not in quotes-->
<b>
</A>Select One<A> <!-- tag start and end switched-->
<br>
</b>
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
Yes
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
No
</span>
</td>
</tr>
</table>
</div>
I've been trying to make an HTML signature in apple mail, which seems to be working fine for me. However, when I get replies to my emails, I see that some email clients make the image extremely large. I thought I found the solution by specifying the dimensions multiple times, and it seemed to be working fine for a while, but now it has started again.
So my question is: how do I make sure the image remains the same size?
<!--start-->
<style type="text/css">a.link{margin:0;padding:0;border:none;text-decoration:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="format-detection" content="telephone=no">
<br/><br/> <!--line break-->
<!--image here-->
<table id="sig" width="320” cellspacing="0" cellpadding="0" border-spacing="0" style="width:320px;margin:0;padding:0;font-size: 12px;">
<tr> <!--indicates the row-->
<td valign="top" width="102" style="width:102px;margin:0;padding:0;">
<a href="website" title="My Name" style="border:none;text-decoration:none;">
<img moz-do-not-send="true"
src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Large_Scaled_Forest_Lizard.jpg"
alt="Random Image" width="102" height="102"
style="border:none;width:102px;height:102px;display:block">
</a>
</td>
<td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">
</td>
<!--here starts the text/names etc-->
<td style="margin:0;padding:0;">
<table id="sig2" cellspacing="0" cellpadding="0" border-spacing="0" style="padding:0;margin:0;font-family:'Lucida Grande',sans-serif;font-size:12px;line-height:10px;color:#000000;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<strong>
<a href="mailto:MyEmail" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000">MyName
</span>
</a>
</strong>
<span style="color:#00277C">|
</span>
<a href="mailto:MyEmail" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000;font-style:italic">Function Title
</span>
</a>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:5px;mso-line-height-rule:exactly;line-height:5px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<a href="mailto:MyEmail" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000">hello#example.com
</span>
</a>
<span style="color:#00277C">|
</span>
<span style="color:#000000"> +1 23 45 67 89 23
</span>
</td>
</tr>
<tr>
<td height="8" style="height:8px;font-size:8px;mso-line-height-rule:exactly;line-height:8px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<strong>
<span style="color:#000000">CompanyName
</span>
</strong>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:5px;mso-line-height-rule:exactly;line-height:5px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<span style="color:#000000">Adress
</span>
<span style="color:#00277C">|
</span>
<span style="color:#000000"> ZipCode
</span>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:5px;mso-line-height-rule:exactly;line-height:5px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<a href="website" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000">www.example.com
</span>
<span style="color:#00277C">|
</span>
<span style="color:#000000"> +1 23 457 2462 35
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/> <!--line break-->
<!--end-->
I really hope someone can help me, thanks in advance!
<tr style="background-color:yellow">
<td style="color:red font-weight:bold">
SERVER1
</td>
<td style="color:red">
Sampler
</td>
<td style="color:red">
Offline
</td>
<td style="color:red">
No
</td>
</tr>
Can anyone please tell me why my text isn't bold and red? if I use 1 css style then it seems to work fine
You need to end your style property with a semicolon ; if you have multiple properties.
<tr style="background-color:yellow;">
<td style="color:red; font-weight:bold;">
SERVER1
</td>
<td style="color:red;">
Sampler
</td>
<td style="color:red;">
Offline
</td>
<td style="color:red;">
No
</td>
</tr>
I have developed an HTML mailer which has to render in outlook it work fine in all browsers but breaks when I render in Outlook. Please see the below link to get the code.
http://jsfiddle.net/Z8xFn/
<body>
<table class="mailer-document" cellpadding="0" cellspacing="0">
<tr>
<td class="header">
<img src="top green and blue lines.jpg" alt="header" />
</td>
</tr>
<tr class="content-bg">
<td>
<p class="welcomecontent">Hi <span class="username">KELLY DEANNA,</span></p>
</td>
</tr>
<tr class="content-bg">
<td>
<p class="welcomecontent"><span>Federation Request has been raised by</span>
<b>Renu V Menon</b> <span>and its in your cart for approval</span></p>
</td>
</tr>
<tr class="content-bg">
<td>
<p class="details">Following are the details of the request for your reference:</p>
</td>
</tr>
</table>
<table class="details-table" cellpadding="0" cellspacing="0">
<tr>
<td class="details-left" width="185px">
<span class="RequestID">
Request ID
</span>
</td>
<td class="details-right" width="auto">
<span class="Details">: 30147633 </span>
</td>
</tr>
<tr>
<td class="details-left" width="185px">
<p class="RequestID">
Associate ID
</p>
</td>
<td class="details-right" width="auto">
<p class="Details">: 394163 </p>
</td>
</tr>
<tr>
<td class="details-left" width="185px">
<p class="RequestID">
Project Name
</p>
</td>
<td class="details-right" width="auto">
<p class="Details">: Domain </p>
</td>
</tr>
<tr>
<td class="details-left" width="185px">
<p class="RequestID">
Domain Name
</p>
</td>
<td class="details-right" width="auto">
<p class="Details">: Domain#tech.com </p>
</td>
</tr>
</table>
</body>
In your table, tr and td tags add:
border="0"
and add this into your head:
<style type="text/css">
table {border-collapse: collapse;}
</style>
I hope this helps :)
I have a table. some td has palin text and some td has text inside the div.
<table class="k-selectable" role="grid" data-role="selectable">
<tbody>
<tr class="k-state-selected" role="row" aria-selected="true">
<td class="center" role="gridcell">
</td>
<td class="center" role="gridcell">
<div class="rc-sprite-td sprite-null">
</div>
</td>
<td role="gridcell">
<div class="wb-ro-changed">
24261 <span><img src="/RepairCenterWeb/Whiteboard/GetImage?IsOnHold=false&IsVoid=false"></span></div>
</td>
<td role="gridcell">
Issue 11
</td>
<td class="money" role="gridcell">
<span class="float-left rc-sprite-td sprite-null"> </span>$1,186.55
</td>
<td role="gridcell">
<div class="wb-arrival-overdue">
10/9/2013</div>
</td>
<td role="gridcell">
<div class="wb-delivery-overdue">
10/9/2013</div>
</td>
<td role="gridcell">
</td>
<td role="gridcell">
</td>
<td class="center" role="gridcell">
<div class="rc-sprite-td sprite-null">
</div>
</td>
<td class="center" role="gridcell">
<img src="/RepairCenterWeb/Whiteboard/GetImage?IsClosed=false&HasPpi=false&IsPpiVeto=false&IsPartsDeleted=false&HasPartsSupplement=false&HasLaborSupplement=false">
</td>
<td class="center" role="gridcell">
<img src="/RepairCenterWeb/Whiteboard/GetImage?HasSublet=false&SubletStatus=0&HasCriticalNote=false">
</td>
<td class="center" role="gridcell">
<div class="rc-sprite-td sprite-null">
</div>
</td>
<td role="gridcell">
<div class="center no">
No</div>
</td>
<td role="gridcell">
<div class="center ">
</div>
</td>
<td role="gridcell">
<div class="center ">
</div>
</td>
<td role="gridcell">
<div class="center no">
No</div>
</td>
<td role="gridcell">
<div class="center ">
</div>
</td>
<td role="gridcell">
s s
</td>
</tr>
</tbody>
</table>
And CSS is
.k-state-selected:hover {
color: #ffffff;
background-color: #0992eb;
border-color: #0992eb;
}
.k-state-selected td div{color: #ffffff;}
When I select any row it shows the blue background and white text. My problem is it is working fine for plain text inside and inside div text. ANy one can add text inside the span,label etc. So in this case i have to add following
.k-state-selected td label{color: #ffffff;}
.k-state-selected td span{color: #ffffff;}
Is there any way that can apply css for test inside the html control inside a td.
You could use the "any element" selector *:
.k-state-selected td * {color: #ffffff;}
This will match only if the td has (at least) one element as child.