I try to write an outlook plugin that inserts a link into the email body. I want to give the link a style in order to look as a button, to give the user a more engaging experience.
The issue I got, is that outlook changes the style on the elements, and the inline style I put on that element is getting lost.
I am inserting the HTML as shown below:
var tablePref = '<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;margin: 0;"><tr><td border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;margin: 0;padding: 10px 18px;background:\'';
var backgroundColor = 'green'; //The color is user-given, I put green as an example
var tableSuf = '\'">Some text</td></tr></table>'
var item = Office.context.mailbox.item;
item.body.setAsync(tablePref+backgroundColor+tableSuf,
{
coercionType: Office.CoercionType.Html,
asyncContext: {}
},
function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed)
{
//Show error dialog
}
else
{
//Successfully set data in item body.
}
});
I get the link on the email successfully, and it looks just right, but when I send the email, the HTML structure of this button looks like this instead:
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse">
<tbody>
<tr>
<td style="background: 'green';">
<p class="MsoNormal" style="mso-element: frame; mso-element-frame-hspace: 2.25pt; mso-element-wrap: around; mso-element-anchor-vertical: paragraph; mso-element-anchor-horizontal: column; mso-height-rule: exactly">
<a href="https://somelink.com" target="_blank" rel="noreferrer">
<span style="text-decoration: none">Some Text</span>
</a>
<!-- o ignored -->
</p>
</td>
</tr>
</tbody>
</table>
Outlook is changing my a elements, and this causes that mail clients render the element with a line below because the style got overridden. Is there any way to avoid Outlook change my HTML or it is a known bug? This is happening across all platforms (OWA, Outlook for Mac 16.21 and Outlook for Windows)
Thanks for any help
Related
I'm working on a warning banner to be displayed for our users to warn them not to click the links or attachment in a suspicious email, so that they can be warned about any phishing or spoofing. This is by using the "prepend a disclaimer" rule in exchange online.
I've followed a tutorial on prepending this banner onto an email but Outlook doesn't seem to render the background colours on the table? It just displays the text content only.
Code is here:
<!-- Yellow caution banner -->
<table border=0 cellspacing=0 cellpadding=0 align="left" width="100%">
<tr>
<!-- Remove the next line if you don't want the Yellow bar on the left side -->
<td bgcolor="#ffb900" style="background-color:#ffb900;padding:5pt 2pt 5pt 2pt"></td>
<td width="100%" bgcolor="#fff8e5" cellpadding="7px 6px 7px 15px" style="background-color:#fff8e5; padding:5pt 4pt 5pt 12pt; word-wrap:break-word; font-family:sans-serif">
<div style="color:#222222;">
<span style="color:#222; font-weight:bold;">Caution:</span>
This is an external email and has a suspicious subject or content. Please do not click on any links or download any files unless you know the sender and you are expecting this message. If you are unsure, please contact the IT Helpdesk.
</div>
</td>
</tr>
</table>
<br />
I'm trying to get it to look like this:
(https://i.stack.imgur.com/yltQ7.png)
But I receive this instead.
(https://i.stack.imgur.com/3fiZx.png)
It doesn't seem to matter whether dark mode is enabled or not. As far as I know, HTML is enabled in outlook.
Thanks in advance for any help with this.
Didn't work to me as well. Try this:
<table border=0 cellspacing=0 cellpadding=0 align="left" width="100%">
<tr>
<!-- Remove the next line if you don't want the Yellow bar on the left
side -->
<td style="background:#ffb900;padding:5pt 2pt 5pt 2pt"></td>
<td width="100%" cellpadding="7px 6px 7px 15px" style="background:#fff8e5;padding:5pt 4pt 5pt 12pt;word-wrap:break-word">
<div style="color:#222222;">
<span style="color:#222; font-size:13px; font-weight:bold;">CAUTION:</span>
<span style="color:#222; font-size:13px;">This email is from an external source. Do not click links or open attachments unless you recognize the sender and know the content is safe. When in doubt, contact Nova IT department
</div>
</td>
I'm trying to create .oft template for outlook 2010 with a text over an image - text should be customisable by the end users...
If I create new e-mail from a html file and save it as template, input is not editable (using just a normal styled paragraph)
If I create new e-mail template directly in outlook, everything is ok for users, but it doesn't send it properly - everything is send as an attachment - so it doesn't display it properly in some mail clients (e.g. gmail).
Is there any bullet proof way how to create e-mail templates for outlook 2010 ?
I made a Fiddle so you can see this code in action: https://jsfiddle.net/wallyglenn/7zLaLrfx/
<div style="background-color:#ff0000; width:600px;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
</v:background>
<![endif]-->
<table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
<h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
Background Image with text on top
</h1>
</td>
</tr>
</table>
</div>
The original code was taken from https://backgrounds.cm.
Good luck.
Selenium is not able to find elements.
I am trying to find an id with PageHeader_logourl
But it's throwing Unable to locate an element with xpath expression.
Am I doing anything wrong
Here is the html code
<DIV id="page" class="page">
<DIV id="wrapper" class="wrapper">
<DIV id="header" class="header">
<TABLE width="100%" height="40" cellspacing="0" cellpadding="0" border="0" ID="Table2">
<TR>
<TD>
<TABLE height="40" cellspacing="0" cellpadding="0" border="0" ID="Table3">
<TR>
<TD><span id="HeaderLogoImage"></span></TD>
<TD valign="middle"><label id="PageHeader_lblProjectName" class="projectname">Scania Trucks – SSS 4 TestR1</label></TD>
Here is the snapshot of my selenium code:
driver.findElement(By.xpath("//input[#name='UserNameInputText']")).sendKeys(username);
driver.findElement(By.xpath("//input[#name='Brand']")).sendKeys(password);
driver.findElement(By.xpath("//input[#name='CmdLogin']")).click();
Assert.assertTrue(isuserloggedin(),"Login failed");
}
public boolean isuserloggedin()
{
boolean flag = false;
if (!driver.findElements(By.id("Cancel")).isEmpty() ||
driver.findElement(By.xpath("//a[#id=['PageHeader_logoUrl']")).isDisplayed());
{
flag = true;
}
return flag;
There seems to be an error of one extra [ in your xpath. You may want to try this "//*[#id='PageHeader_logoUrl']"
You can look for more strategies here
Try search the parent element first:
by.Xpath("//table[#id='Table3']//a[#id='PageHeader_logoUrl']")
Also my suggestion (again) is to search the nearest/ parent element first and debug if you actually get the element that you wanted.
I have make table scrollable inside div and everything is working fine but table header is too scrolling.I want to make table header fixed. And this table is rendered within a div. I have used PahingHelper model for paging.I have tried to use scrollable in table but it too is not working.So, am here to make scrollable-table. Is there any way to make table scrollable?
// here is my sample code for scrolling
#model ShresthaTrade.Helper.PagingHelper
<table >
<tr>
<th>Brand</th>
<th>Machine Type</th>
<th>Machine Model</th>
<th>Machine Serial</th>
<th>Mac Address</th>
</tr>
</table>
<div style=" overflow:auto; height: 340px;">
<table >
<tbody>
#if (Model.Datatable.Rows.Count > 0)
{
foreach (System.Data.DataRow row in Model.Datatable.Rows)
{
<tr>
<td>#row["brand_name"]</td>
<td>#row["machine_type_name"]</td>
<td>#row["MachineModel"]</td>
<td>#row["MachineSerial"]</td>
<td>#row["MacAddress"]</td>
</tr>
}
}
else
{
<tr>
<td colspan="4">No records are found</td>
</tr>
}
</tbody>
</table>
</div>
I'm using the Razor view engine with MVC 3 and I'm trying to make even and odd rows have different classes in a table.
So far I've got this
#{ var odd = true; }
#foreach(var userLot in Model) {
if (!odd) {
<tr id="lot#userLot.Id" class="even">
else
<tr id="lot#userLot.Id" class="odd">
}
<td>#userLot.Id</td>
<td>#userLot.Description</td>
<td>#userLot.Carat</td>
<td class="averageBid">#userLot.AverageBid</td>
<td class="rank">#userLot.Rank</td>
<td class="currentBid">#userLot.CurrentBid</td>
<td style="width: 200px; height: 30px;" class="tdWithBidInput"><input type="text" style="display: none" /></td>
</tr>
#{ odd = !odd; }
}
This is giving me endless trouble with the stupid view engine unable to figure out what is markup and what is code. I've tried wrapping the tr opening tags in a text directive, but then the stupid view engine moans about the closing tr tags. If I then wrap the closing tr tag in a text directive the stupid view engine moans that the text directive has no opening tag.
Just to be clear, this
<text></ tr></text>
gives an error that the text tag has no matching opening tag. Lovely.
How do I write this so that Razor doesn't give an error?
Please don't recommend a JavaScript solution, I'm trying to get around the Razor issues here.
How about this:
#{ var odd = true; }
#foreach(var userLot in Model) {
<tr id="lot#(userLot.Id)" class="#(odd ? "odd": "even")">
<td>#userLot.Id</td>
<td>#userLot.Description</td>
<td>#userLot.Carat</td>
<td class="averageBid">#userLot.AverageBid</td>
<td class="rank">#userLot.Rank</td>
<td class="currentBid">#userLot.CurrentBid</td>
<td style="width: 200px; height: 30px;" class="tdWithBidInput"><input type="text" style="display: none" /></td>
</tr>
odd = !odd;
}
#( ... ) is a valid and very useful statement.