I'm trying to master my xPath findings but I'm facing a problem. My goal is to get checkbox from the table. Could you please give me any advices how locator should always be set?
Let's imagine that my goal is the input pointing on checkbox which needs to be clicked.
Firstly I tried in really simple way:
By.XPath("//input[#type = 'checkbox'][1]")
I've got two checkboxes so I'm pointing to get the first one. Result - Fail.
Next:
By.XPath("//div[#class = 'receipt-grid-container h-90']//tbody/tr[1]/td[5]/input");
I'm starting from the main class and going "down", through tbody and table elements. As my checkbox is located inside the 5th column I've tried to find it by ending it with /input. Result - Fail also.
And the final approach, I supposed it could be done just by "going down" so:
By.XPath("//div[#class = 'receipt-grid-container h-90']//tbody/tr[1]/td[5]/div/input");
However, I failed also. Can anyone advice me how we can find it? Also, when we're searching for the xpath, is there a need starting "from the top to the bottom" technique like I'm doing above? Or we can start in different way using e.g xPath Axes
<div class="receipt-grid-container h-90">
<div style="height: auto; overflow: auto;">
<div>
<table style="background-color: rgb(255, 255, 255); width: 100%; border-collapse: collapse; border-spacing: 0px; table-layout: fixed; font-family: Roboto, sans-serif;">
<thead style="border-bottom: 1px solid rgb(224, 224, 224);">
<tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;">
<th width="35%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
<!-- react-text: 1986 -->Name<!-- /react-text -->
</th>
<th width="15%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
<!-- react-text: 1988 -->Quantity<!-- /react-text -->
</th>
<th width="20%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
<!-- react-text: 1990 -->EUR<!-- /react-text -->
</th>
<th width="15%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
<!-- react-text: 1992 -->Refunded<!-- /react-text -->
</th>
<th width="15%" style="font-weight: normal; font-size: 12px; padding-left: 24px; padding-right: 24px; height: 56px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: rgb(158, 158, 158); position: relative; background-color: inherit;">
<!-- react-text: 1994 -->Refund<!-- /react-text -->
</th>
</tr>
</thead>
</table>
</div>
<div style="height: inherit; overflow: hidden auto;">
<table style="background-color: rgb(255, 255, 255); width: 100%; border-collapse: collapse; border-spacing: 0px; table-layout: fixed; font-family: Roboto, sans-serif;">
<tbody>
<tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;">
<td width="35%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">Coca-Cola 0,5 l</td>
<td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">1 pcs</td>
<td width="20%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">3.00</td>
<td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">0</td>
<td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">
<div style="cursor: pointer; position: relative; overflow: visible; display: table; height: auto; width: 100%;">
<!-- react-empty: 2005 --><input type="checkbox" value="on" style="position: absolute; cursor: inherit; pointer-events: all; opacity: 0; width: 100%; height: 100%; z-index: 2; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;">
<div style="display: flex; width: 100%; height: 100%;">
<div style="transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; float: left; position: relative; display: block; flex-shrink: 0; width: 24px; margin-right: 16px; margin-left: 0px; height: 24px;">
<div>
<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: rgba(0, 0, 0, 0.87); height: 24px; width: 24px; user-select: none; transition: opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1) 200ms; position: absolute; opacity: 1;">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
</svg>
<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: rgb(0, 188, 212); height: 24px; width: 24px; user-select: none; transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; position: absolute; opacity: 0; transform: scale(0);">
<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg>
</div>
<div></div>
<div style="position: absolute; height: 100%; width: 100%; top: 0px; left: 0px;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr style="color: rgba(0, 0, 0, 0.87); height: 48px;">
<td width="35%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">Fanta Zero 0,5 l</td>
<td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">1 pcs</td>
<td width="20%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">3.00</td>
<td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">0</td>
<td width="15%" style="padding-left: 24px; padding-right: 24px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: inherit;">
<div style="cursor: pointer; position: relative; overflow: visible; display: table; height: auto; width: 100%;">
<!-- react-empty: 2023 --><input type="checkbox" value="on" style="position: absolute; cursor: inherit; pointer-events: all; opacity: 0; width: 100%; height: 100%; z-index: 2; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;">
<div style="display: flex; width: 100%; height: 100%;">
<div style="transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; float: left; position: relative; display: block; flex-shrink: 0; width: 24px; margin-right: 16px; margin-left: 0px; height: 24px;">
<div>
<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: rgba(0, 0, 0, 0.87); height: 24px; width: 24px; user-select: none; transition: opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1) 200ms; position: absolute; opacity: 1;">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
</svg>
<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: rgb(0, 188, 212); height: 24px; width: 24px; user-select: none; transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; position: absolute; opacity: 0; transform: scale(0);">
<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg>
</div>
<div></div>
<div style="position: absolute; height: 100%; width: 100%; top: 0px; left: 0px;"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
As per the HTML you have shared your usecase might be either to click the checkbox for the item Coca-Cola or the checkbox for the item Fanta Zero. So to click the respective checkbox you can create a function as follows:
public void click_checkbox(string softdrink)
{
driver.FindElement(By.XPath("//div[contains(#class,'receipt-grid-container')]//table/tbody//td[contains(.,'" + softdrink + "')]//following::input[1]")).Click();
}
Now you can call the function click_checkbox() with the required item which ever you want to click as follows:
click_checkbox("Coca-Cola")
//or
click_checkbox("Fanta Zero")
Try using this as your xpath:
By.XPath("(//input[#type = 'checkbox'])[1]")
Generally, try selecting the elements by id (it should be unique, but it isn't always), then name, and after that I would keep them as simple as possible, without using too many numbered elements (e.g. //div[13]/span[9]//td/td[4]/div).
Related
I am using Power Tools For Xml to convert a word document to HTML. I am then plugging that HTML into the ITextSharp XMLWorkerHelper to create a PDF. This overall process works fine for what I am trying to accomplish with no issues.
The problem I am having is that ItextSharp is adding black gridlines to the a table that is in the generated HTML. The HTML that Power Tools is generating is below. In the styling all of the border styling is set to none. Does anyone have enough experience with ItextSharp to identify what in this html is causing ItextSharp to put black gridlines around the table when it converts it into a PDF?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="Generator" content="PowerTools for Open XML" />
<style>
span
{
white-space: pre-wrap;
}
p.Pt-Normal
{
margin-bottom: 0;
font-family: Calibri;
font-size: 10pt;
line-height: 108%;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
span.Pt-000000
{
font-size: 10pt;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 0;
}
table.Pt-000005
{
border-collapse: collapse;
border: none;
margin-left: 0;
margin-bottom: .001pt;
}
tr.Pt-000006
{
height: 0.23in;
}
td.Pt-000007
{
vertical-align: top;
width: 140.75pt;
border-top-style: none;
padding-top: 0;
border-right-style: none;
padding-right: 5.4pt;
border-bottom-style: none;
padding-bottom: 0;
border-left-style: none;
padding-left: 5.4pt;
}
span.Pt-DefaultParagraphFont-000008
{
font-family: Calibri;
font-size: 10pt;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 0;
}
td.Pt-000009
{
vertical-align: top;
width: 95.55pt;
border-top-style: none;
padding-top: 0;
border-right-style: none;
padding-right: 5.4pt;
border-bottom-style: none;
padding-bottom: 0;
border-left-style: none;
padding-left: 5.4pt;
}
td.Pt-000010
{
vertical-align: top;
width: 63.35pt;
border-top-style: none;
padding-top: 0;
border-right-style: none;
padding-right: 5.4pt;
border-bottom-style: none;
padding-bottom: 0;
border-left-style: none;
padding-left: 5.4pt;
}
td.Pt-000011
{
vertical-align: top;
width: 168.1pt;
border-top-style: none;
padding-top: 0;
border-right-style: none;
padding-right: 5.4pt;
border-bottom-style: none;
padding-bottom: 0;
border-left-style: none;
padding-left: 5.4pt;
}
</style>
</head>
<body>
<div align="left">
<table dir="ltr" class="Pt-000005">
<tr class="Pt-000006">
<td class="Pt-000007">
<p dir="ltr" class="Pt-Normal">
<span class="Pt-DefaultParagraphFont-000008">N/A</span></p>
</td>
<td class="Pt-000009">
<p dir="ltr" class="Pt-Normal">
<span xml:space="preserve" class="Pt-000000"></span>
</p>
</td>
<td class="Pt-000010">
<p dir="ltr" class="Pt-Normal">
<span xml:space="preserve" class="Pt-000000"></span>
</p>
</td>
<td class="Pt-000011">
<p dir="ltr" class="Pt-Normal">
<span class="Pt-DefaultParagraphFont-000008">CASE NO: abc</span></p>
</td>
</tr>
</table>
</div>
I would like to set html body to iframe with this scenario :
<ItemTemplate>
<div class="thumb" align="center" style="height:150px;width:130px">
<asp:Panel ID="Panel2" runat="server" Height="150px" Width="130px">
<table width="40%" align="center">
<tr>
<td>
<iframe style="overflow:hidden;height:140px;width:120px" src="data:text/html;charset=utf-8,escape(<%#Eval("TemplateBody")%>)"></iframe>
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"
TargetControlID="Panel2"
PopupControlID="Panel1"
DynamicContextKey='<%# Eval("Id") %>'
DynamicControlID="Panel1"
DynamicServiceMethod="GetDynamicContent"
Position="Right">
</ajaxToolkit:PopupControlExtender>
</div>
<table width="145px" align="left" style="border-color:Black;border-style:solid;border-width:1px;height:50px">
<tr>
<td align="center">
<table>
<tr>
<td><asp:CheckBox ID="ChkSelect" runat="server"/></td>
<td> </td>
<td><asp:LinkButton ID="LinkButton2" runat="server" CssClass="quicklink"
Text='<%# Eval("TemplateName").ToString().Length > 12 ? Eval("TemplateName").ToString().Substring(0,12)+"..." :Eval("TemplateName") %>' CommandName="ViewTemplate"
ToolTip ='<%# Eval("TemplateName")%>' CommandArgument='<%# Eval("Id") %>'></asp:LinkButton>
<br/>
<asp:Label ID="Label2" runat="server" CssClass="normaltext"
Text='<%# DataBinder.Eval(Container.DataItem, "CreatedDate", "{0:dd/MM/yyyy}") %>'
ToolTip='<%# Bind("CreatedDate","{0:F}") %>'></asp:Label></td>
</tr>
</table>
</td>
</tr>
</table>
<asp:Label Visible="false" runat="server" ID="lblNoRecord" Text="No Record Found." ForeColor="Red"></asp:Label>
</ItemTemplate>
i just want to show html preview with fixed height and with. here this tag is in data list control. but html view not rendered.
Is this correct way to assign html content to iframe src attribute ????
Update
here is data comes from data base :
<p>
</p>
<p>
<title></title>
</p>
<table cellpadding='0' cellspacing='0' style='width: 100%;' width='100%'>
<tbody>
<tr>
<td style='vertical-align: top; text-align: center; padding-top: 20px; padding-bottom: 20px;'>
<table cellpadding='0' cellspacing='0' style='width: 700px;'>
<tbody>
<tr>
<td style='height: 30px; vertical-align: middle; text-align: left; border-top-color: #eeeeee; border-top-width: 3px; border-top-style: solid; background-color: #ffffff;'>
<table cellpadding='0' cellspacing='0' style='width: 100%; background-color: #ffffff;'>
<tbody>
<tr>
<td style='width: 60%; vertical-align: middle; text-align: left; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; background-color: #ffffff;'>
<div>
<span style='vertical-align: middle;'><img alt='' src='http://www.Newsletterservices.in/Templates/SPF_005/images/logo.gif' style='vertical-align: middle;' /></span><span style='vertical-align: middle; font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 20px; color: #000000; margin-left: 5px;'>##UserOrganisation##</span></div>
</td>
<td style='width: 40%; vertical-align: middle; text-align: right; padding-right: 10px; background-color: #ffffff;'>
<div style='font-size: 16px; color: #000000; font-family: 'trebuchet ms', verdana, 'ms sans serif';'>
Call Now: ##UserPhone##</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style='vertical-align: top; text-align: left; border-color: #e7e7e7 #d5d5d5 #cbcbcb #e7e7e7; border-width: 1px; border-style: solid; background-color: #f6f6f6;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='width: 40%; text-align: left; vertical-align: middle; padding: 20px;'>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 30px; font-weight: bold; color: #323334; line-height: 30px; white-space: normal;'>
RISK-FREE</div>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 20px; font-weight: bold; color: #000000; line-height: 20px; white-space: normal;'>
TRADING OPTIONS</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #757575; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='margin-top: 8px;'>
<span style='vertical-align: middle; white-space: normal;'><a href='#' target='_blank'><img alt='' src='http://www.Newsletterservices.in/Templates/SPF_005/images/btn_start_now.gif' style='vertical-align: middle; border: 0px;' /></a></span></div>
</td>
<td style='width: 60%; text-align: center; vertical-align: bottom; padding-top: 10px; padding-right: 10px; padding-left: 10px;'>
<div>
<img alt='' src='http://www.Newsletterservices.in/Templates/SPF_005/images/head_img.gif' style='vertical-align: middle;' /></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style='vertical-align: middle; text-align: right; padding-top: 10px; padding-bottom: 10px; background-color: #ffffff;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='width: 25%; vertical-align: top; text-align: left; padding: 8px; border-bottom-color: #cbcbcb; border-bottom-width: 1px; border-bottom-style: solid; border-top-color: #e7e7e7; border-top-width: 1px; border-top-style: solid; border-left-color: #e7e7e7; border-left-width: 1px; border-left-style: solid; background-color: #17c1fc;'>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 18px; font-weight: bold; color: #ffffff; line-height: 18px; white-space: normal;'>
Hghlight Note:</div>
</td>
<td style='width: 75%; vertical-align: top; text-align: left; padding: 8px; border-bottom-color: #cbcbcb; border-bottom-width: 1px; border-bottom-style: solid; border-right-color: #d5d5d5; border-right-width: 1px; border-right-style: solid; border-top-color: #e7e7e7; border-top-width: 1px; border-top-style: solid; background-color: #f7f7f7;'>
<div style='font-family: verdana, 'ms sans-serif'; font-size: 14px; color: #000000; line-height: 14px; white-space: normal;'>
Insert here highlight note.</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style='vertical-align: top; text-align: left; padding-top: 10px; padding-bottom: 10px; background-color: #ffffff;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='vertical-align: top; text-align: left; padding-bottom: 10px;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='width: 65%; vertical-align: top; text-align: left; padding-right: 5px;'>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 14px; font-weight: bold; color: #2b2b2b; line-height: 14px; white-space: normal;'>
Dear ##FirstName## ##LastName##,</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #2b2b2b; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #2b2b2b; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #2b2b2b; line-height: 13px; white-space: normal;'>
Thank You,</div>
<div style='font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #2b2b2b; line-height: 13px; white-space: normal;'>
Team ##UserOrganisation##</div>
</td>
<td style='width: 35%; vertical-align: top; text-align: left; padding-left: 5px; padding-right: 5px;'>
<div style='white-space: normal;'>
<table cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='text-align: left; vertical-align: top; padding: 8px; background-color: #17c1fc;'>
<div style='font-family: 'trebuchet ms', verdana, 'ms sans-serif'; font-size: 16px; color: #ffffff; font-weight: bold; line-height: 16px; white-space: normal;'>
Other Services</div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; font-weight: bold; white-space: normal;'>
Heading-1</div>
<div style='margin-top: 4px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='text-align: right; margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>
<a href='#' style='font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>Read More >></a></div>
<div style='margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; font-weight: bold; white-space: normal;'>
Heading-1</div>
<div style='margin-top: 4px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>
Insert some text here. Insert some text here. Insert some text here. Insert some text here. Insert some text here.</div>
<div style='text-align: right; margin-top: 8px; font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>
<a href='#' style='font-family: verdana, 'ms sans-serif'; font-size: 11px; color: #ffffff; line-height: 13px; white-space: normal;'>Read More >></a></div>
</td>
</tr>
<tr>
<td style='vertical-align: middle; text-align: center; height: 10px;'>
<img alt='' src='http://www.Newsletterservices.in/Templates/SPF_005/images/spacer.gif' /></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style='vertical-align: top; text-align: left; border-top-color: #eeeeee; border-top-width: 3px; border-top-style: solid; padding: 10px; background-color: #ffffff;'>
<div style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif'; margin-bottom: 3px; margin-top: 3px;'>
<span><b>Address: </b>##UserAddress1##, ##UserAddress2##, ##UserCity##-##UserPostalCode##</span></div>
<div style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif'; margin-bottom: 3px;'>
<span><b>Phone: </b>##UserPhone## | <b>Fax: </b>##UserFax##</span></div>
<div style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif'; margin-bottom: 3px;'>
<span><b>Email: </b><a href='mailto:##UserEmailAddress##' style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif';' target='_blank'>##UserEmailAddress##</a> | <b>Visit us at: </b><a href='#' style='text-align: left; font-size: 11px; color: #323334; font-family: verdana, 'ms sans serif';' target='_blank'>http://www.yourdomain.com</a></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>
</p>
please help me...
You need to make sure the output of <%#Eval("TemplateBody")%> is html encoded.
You also need to be aware that some browsers don't support Data URIs.
You can check a similar question here
In ASP.net I have made webpage which is used to fill in an offer form.
There are 3 divs. The left div which has the TextBoxes to fill in.
The middlesector which is the form itself.
The right div which has the buttons.
So far I've been able to export only the midlesector to PDF with the stuff I filled in on the left and all. The problem is that it completely neglects the CSS, which has been made using absolute positioning. Therefore I would like to ask how to include the CSS style so that it looks the way it's supposed to instead of one continuous text.
This is the code for the middlesector:
<div id="middlesector" runat="server">
<%--><asp:GridView ID="GridView1" runat="server"></asp:GridView>--%>
<asp:Image ID="TextArea1" runat="server" ImageUrl="Images\VisserGroup.png"></asp:Image>
<label id="textarea2" runat="server" cols="20" name="S2"></label>
<label id="textarea3" runat="server" cols="20" name="S3">Visser International Trade & Engineering</label>
<label id="textarea4" runat="server" cols="20" name="S4">T.a.v</label>
<label id="textarea5" runat="server" cols="20" name="S5">Postbus</label>
<label id="textarea6" runat="server" name="S6"></label>
<label id="textarea7" runat="server" cols="20" name="S7"></label>
<label id="textarea8" runat="server" cols="20" name="S8"></label>
<label id="textarea9" runat="server" name="S9"></label>
<label id="textarea10" runat="server" cols="20" name="S10"></label>
<label id="textarea11" runat="server" cols="20" name="S11"></label>
<label id="textarea12" runat="server" cols="20" name="S12">-OFFERTE-</label>
<label id="textarea13" runat="server" name="S13">Geachte</label>
<label id="textarea14" runat="server" name="S14"></label>
<label id="textarea15" runat="server" cols="20" name="S15">Met referte aan het aangename onderhoud hebben wij het genoegen u bijgaand onze offerte te doen toekomen voor het leveren van:</label>
<label id="textarea16" runat="server" cols="20" name="S16"></label>
<label id="TextArea17" runat="server" cols="20" name="S17">Wij danken u voor deze aanvraag en hopen u hiermee een passend voorstel te hebben gedaan. Voor het bespreken van verdere details en toelichting op de offerte zullen wij op korte termijn contact met u opnemen. Indien u direct uw eventuele vragen aan ons wenst voor te leggen dan horen wij dit graag van u.</label>
<label id="TextArea18" runat="server" cols="20" name="S18">Wij vertrouwen u hiermee voldoende van dienst te zijn en houden ons van harte aanbevolen voor uw gewaardeerde opdracht.</label>
<label id="TextArea19" runat="server" cols="20" name="S19">Met vriendelijke groet,Visser Supplies B.V.</label>
<label id="TextArea20" runat="server" cols="20" name="S20">Personal info</label>
<label id="TextArea21" runat="server" cols="20" name="S21">Website : www.vissersupplies.nl</label>
<label id="TextArea22" runat="server" cols="20" name="S22">E-mail : personal info</label>
<label id="TextArea23" runat="server" cols="20" name="S23">Telefoonnummer : personal info 9894</label>
<label id="TextArea24" runat="server" cols="20" name="S24">Copyright Visser Supplies B.V.:</label>
<label id="TextArea25" runat="server" cols="20" name="S25">Deze offerte en alle andere informatie mogen alleen door geadresseerde gebruikt worden. Overdracht aan derden, in welke vorm dan ook, is slechts toegestaan na schriftelijk toestemming van Visser Supplies B.V.</label>
</div>
Here is the CSS:
#middlesector {
position:absolute; left: 150px; top: 60px;
}
#TextArea1 {
height: 250px;
width: 640px;
position: absolute; top:-40px;
border:none;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea2 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 105px;
width: 320px;
position:absolute; top:220px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea3 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 30px;
width: 310px;
position:absolute; top:215px;
left: 410px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea4 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 15px;
width: 310px;
position:absolute; top:250px;
left: 410px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea5 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 15px;
width: 310px;
position:absolute; top:270px;
left: 410px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea6 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 15px;
width: 100px;
position:absolute; top:290px;
left: 410px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea7 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 15px;
width: 310px;
position:absolute; top:310px;
left: 410px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea8 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 15px;
width: 210px;
position:absolute; top:290px;
left: 480px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea9 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 15px;
width: 130px;
position:absolute; top: 360px;
left: 360px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea10 {
height: 15px;
width: 180px;
position:absolute; top:360px;
left: 450px;
border:none;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
}
#textarea11 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 15px;
width: 320px;
position:absolute; top:360px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
left: 0px;
}
#textarea12 {
border-style: none;
border-color: inherit;
border-width: medium;
font-size: large;
font-weight: bold;
height: 25px;
width: 120px;
position:absolute; top:400px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
left: 270px;
}
#textarea13 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 15px;
width: 75px;
position:absolute; top:450px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
left: 0px;
}
#textarea14 {
border-style: none;
border-color: inherit;
border-width: medium;
height: 15px;
width: 200px;
position:absolute; top:450px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
left: 65px;
margin-left: auto;
}
#textarea15 {
height: 30px;
width: 640px;
text-align:start;
text-anchor:end;
position: absolute; top:480px;
border:hidden;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
left: 0px;
}
#textarea16 {
border-style: none;
border-color: inherit;
border-width: medium;
font-size:large;
font-weight: bold;
height: 25px;
width: 250px;
position:absolute; top:540px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
left: 270px;
}
#TextArea17 {
height: 75px;
width: 645px;
text-align:start;
text-anchor:end;
position: absolute; top:580px;
border:hidden;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
left: 0px;
}
#TextArea18 {
height: 30px;
width: 640px;
text-align:start;
text-anchor:end;
position: absolute; top:660px;
border:hidden;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
left: 0px;
}
#TextArea19 {
width: 240px;
position: absolute; top: 700px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
border:hidden;
left: 0px;
}
#TextArea20 {
height: 15px;
width: 400px;
position: absolute; top: 760px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
border:hidden;
left: 0px;
}
#TextArea21 {
height: 15px;
width: 400px;
position: absolute; top: 800px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
border:hidden;
left: 0px;
}
#TextArea22 {
height: 15px;
width: 400px;
position: absolute; top: 820px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
border:hidden;
left: 0px;
}
#TextArea23 {
height: 15px;
width: 400px;
position: absolute; top: 840px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
border:hidden;
left: 0px;
}
#TextArea24 {
height: 10px;
width: 400px;
font-size:smaller;
position: absolute; top: 880px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
border:hidden;
left: 0px;
}
#TextArea25 {
height: 40px;
width: 550px;
font-size: x-small;
position: absolute; top: 895px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-base-color: #fff;
border:hidden;
left: 0px;
}
And finally here is the code behind function: (Edited: 10-10-2013: 14:22:GTM+1)
protected void SaveAsPDF(object sender, EventArgs e)
{
System.Web.UI.HtmlControls.HtmlGenericControl middlesector = new System.Web.UI.HtmlControls.HtmlGenericControl("middlesector");
string strHtml = null;
//MemoryStream memStream = new MemoryStream();
StringWriter strWriter = new StringWriter();
Server.Execute("OfferteForm1.aspx", strWriter);
strHtml = strWriter.ToString();
strWriter.Close();
strWriter.Dispose();
iTextSharp.text.Image addLogo = default(iTextSharp.text.Image);
addLogo = iTextSharp.text.Image.GetInstance(Server.MapPath("Images") + "/VisserSupplies.jpg");
iTextSharp.text.Document docWorkingDocument = new iTextSharp.text.Document(PageSize.A4, 40, 40, 40, 40);
StringReader srdDocToString = null;
try
{
PdfWriter pdfWrite = default(PdfWriter);
var fileCounter = 1;
while (File.Exists("C:/Users/milans/Documents/PDFs/" + textarea11.InnerText + " - " + fileCounter + ".pdf"))
{
fileCounter++;
}
pdfWrite = PdfWriter.GetInstance(docWorkingDocument, new FileStream("C:/Users/milans/Documents/PDFs/" + textarea11.InnerText + " - " + fileCounter + ".pdf", FileMode.Create));
srdDocToString = new StringReader(strHtml);
docWorkingDocument.Open();
addLogo.ScalePercent(50);
addLogo.Alignment = iTextSharp.text.Image.ALIGN_CENTER;
docWorkingDocument.Add(addLogo);
XMLWorkerHelper.GetInstance().ParseXHtml(pdfWrite, docWorkingDocument, srdDocToString);
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
finally
{
if ((docWorkingDocument != null))
{
docWorkingDocument.Close();
docWorkingDocument.Dispose();
}
if ((srdDocToString != null))
{
srdDocToString.Close();
srdDocToString.Dispose();
}
}
//Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "myscript", "window.open('C:/Users/milans/Documents/PDFs/" + textarea11.InnerText + ".pdf" + "','_blank','location=0,menubar=0,status=0,titlebar=0,toolbar=0');", true);
}
public override void VerifyRenderingInServerForm(Control control)
{
}
I get an error at:
Server.Execute("middlesector", strWriter);
And the same error for:
Server.Execute("OfferteForm1.aspx", strWriter);
It has to do with permissions for IUSRS_machinename and ASPNET users.
But I don't know how to add permissions since I don't have a Manifest and somehow can't create one.
I've also tried:
Server.HtmlDecode("middlesector", strWriter);
And:
Server.HtmlDecode("OfferteForm1.aspx", strWriter);
It does compile a PDF but it only has the image.
All I want is for the XMLWorker to include the filled in form in the middlesector Div.
I am trying to get my drop down menu which is made from a sitemap to change colors when there is a mouse over. Here is my code to make the menu:
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" StaticDisplayLevels="2"
Orientation="Horizontal" CssClass="aspmenu">
<StaticHoverStyle CssClass="test" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
Additionally here is the css file:
.level1
{
}
.level2
{
box-shadow: 10px 10px 5px #888888;
color: White;
font-style:italic;
text-align:center;
font-size: 1.3em;
background-color: #fdbe12;
width: 6em;
padding: 4px;
margin: 0px 25px 0px 0px;
}
.level3
{
box-shadow: 10px 10px 5px #888888;
color: White;
font-weight:100;
text-align:center;
font-size: 1.1em;
background-color: #fdbe12;
width: 6.85em;
padding: 0.25em;
}
.test
{
font-weight: bold;
background-color:Fuchsia;
color:Black;
}
Here is the pertinent part of the other CSS file:
body
{
background: #EAFDB3;
width: 100%;
}
#menuBar
{
text-align: left;
width: 43.5em;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 7.75em;
}
Here is a pic:
i need change color in run time in panel
<span class="Apple-style-span"
style="background-color: rgba(0, 0, 0, 0); border-collapse: separate; color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 26px; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">
<span class="Apple-style-span"
style="background-color: rgb(221, 75, 57); color: rgb(255, 255, 255); ">
<div class="head"
style="margin-top: 20px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font: normal normal normal 13px/27px Arial, sans-serif; line-height: 26px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; text-indent: 15px; background-color: rgb(153, 153, 153); ">
<h6 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 13px/27px Arial, sans-serif; line-height: 30px; font-size: large; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-weight: bolder; background-color: #999999; color: #000000;">
Domain Name Registration</h6>
<div class="price"
style="border-width: 0px; margin: 0px; padding: 0px; line-height: 26px; background-color: #999999; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; font-family: Arial, sans-serif; top: 49px; left: 0px; position: absolute; height: 26px; width: 259px;">
<p class="MsoNormal">
<b><span
style="font-size:13.5pt;
font-family:"Times New Roman","serif";mso-fareast-font-family:"Times New Roman"">
Sliver Plan
Hosting
10 HTML Pages
Flash Header
Domain Forwarding
SEO Friendly
<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 13px/27px Arial, sans-serif; line-height: 26px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; background-color: #CCCCCC;">
Now Special Offer!!!</li>
</span></span>
</ul>
</span></span>
</asp:Panel>
I would use jquery for that purpose:
$.("#yourobjectid" or ".classname").css({"background-color:#ababab"})
here you can read about mouse events