I am trying to identifying the table data for the below HTMLcode
<!-- You can use /goo.html to have your application be context sensitive -->
<!-- Add Any custom Tag Lib's required of your project down below -->
<div id="specialHandlingTableWrapper" style="height: 401px;">
<div id="specialHandlingTableHeader" style="width: 636px; position: relative; top: 0px; z-index: 10; vertical-align: top; height: 170px;">
<table id="specialHandlingSelectionTable" class="table table-striped table-hover table-striped data-table">
<thead>
<tbody>
<tr>
<td class="itemNameCell">SOD Catalog Test Code1 not inbound</td>
<td class="skuCell">SOD_CATALOG_SPECIAL_HANDLING</td>
<td/>
<td/>
<td/>
</tbody>
</table>
</div>
I need to get the 3rd column data and below is the xpath written for the same
#FindBy(xpath = "//table[#id='specialHandlingSelectionTable' and class='table table-striped table-hover table-striped data-table']/tr[1]/td[3]")
public WebElement FirstHandlinginstr;
And the interesting part is that I am seeing 2 matching nodes even after defining the tr and td values.Please help me here!
Your XPath expression does not match the input, so I'm surprised you're getting a result anyway. From what you stated in the comments, in seems that for some reason it returns elements of both the table header and body elements (which it shouldn't query at all).
For getting the third table cell of the first row in (each) table body, use this query:
//table[#id='specialHandlingSelectionTable']/tbody/tr[1]/tr[3]
If there are multiple table body elements, and you only want to query the first row of all of them:
(//table[#id='specialHandlingSelectionTable']/tbody/tr)[1]/tr[3]
If you want to query the table headers instead, replace tbody by theader.
Related
I'm struggling to make Aurelia virtual-repeat.for work with table and tr elements. Here is my markup of the modified Users page of aurelia skeleton app:
<table style="width:500px; height: 200px; overflow-y:scroll; display:block">
<tr virtual-repeat.for="user of users" style="width:500px; height: 50px">
<td>
${user.avatar_url}
</td>
</tr>
</table>
When I scroll the table down, the items below aren't rendered and I see just the empty space all over. What am I missing?
The issue was fixed in version 0.4.3, so the described scenario is working now
So I've battled against an HTML email and including Outlook support for some time now. Within the code below Gmail and Outlook both display the <td> at 15px in height. Why? Its only meant to be a cross client hr replacement for a dotted separator line.
<!-- Dotted Horizontal border Outlook Optimized-->
<table style="width:100%;border-bottom:1px dotted #999999;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody align="center" border="0" cellpadding="0" cellspacing="0">
<tr align="center" border="0" cellpadding="0" cellspacing="0">
<td style="background:none;height:1px;width:100%;vertical-align:middle;" border="0" cellpadding="0" cellspacing="0" ></td>
</tr>
</tbody>
</table>
UPDATE:
So its because there is an "empty" cell. I thought that an would take care of it but more was needed. I also tried putting the 1px image inside the cell as mentioned by #Vitorino Fernandes, the height persisted.
The nbsp does in fact need to exist for several email clients and the use of line-height:0px; finally flattened the cell.
as per looking at your code i understand that you are using table to give border -- dont use table because empty table will give some space use td instead and spacer image with height 1px(ad per your border height) and give bg-color to td
or if you want to use the same layout
add a spacer image in the empty td with height 1px and background color- as per your border and give line-height:1px to the parent tr
Here is a sample: JsFiddle
I have a table with 3 columns. Each should have 500px. But my table is resized to fit within the parent div (600px).
The width of my table should be 1500 (3x500) and a scrollbar should be displayed in parent div. How can I resolve this without adding a "width=XXX"?
<div id="container">
<table id="table">
<colgroup>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
</colgroup>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
Apply min-width to the table tag (it doesn't work on col as explained in my comment on the OP).
Updated CSS:
#table {
table-layout:fixed;
margin:3px;
border-collapse:collapse;
min-width: 1500px;
}
Tested in Chrome and Firefox, and should be widely supported (according to caniuse).
Edit I've realised this answer doesn't actually answer your question, as it works around the col tag problem rather than solving it. I hope it helps anyway though.
I am writing relational xpath i need this code to fetch "Tax" Location
<td id="td26" style="width: 16%">
<div class="bglabel" style="width: 150px; clear: both">
Tax
<div style="float: right;">
</div>
</td>
Xpath Code which i have written
td[div[text()='Tax ']] - Not Working
td[div[contains(text(),'Tax')]] - Not Working
The accepted answer changes OP's intended logic.
What OP's trying to do is to find div with text "Tax" inside a td, therefore OP's own answer is on the right track, the accepted answer isn't.
//div[contains(text(),'Tax')] locates it anywhere in DOM, which is likely to cause trouble.
What OP wants is (using . to specify current node):
//td[./div[contains(text(),'Tax')]]
Imagine there is another div also contains text "Tax", //div[contains(text(),'Tax')] will find the one OP doesn't want.
<div>Tax table</div>
<table>
<tr>
<td id="td26" style="width: 16%">
<div class="bglabel" style="width: 150px; clear: both">Tax <div style="float: right;"></div></div>
</td>
</tr>
</table>
#Santhosh.S: Hope this makes sense to you.
Sending out mass emails, pretty much the whole thing is inside tables.
CSS affecting the table:
.title {
vertical-align: top;
}
HTML:
<table width="580" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title" align="left" width="440" valign="top">
<h2><singleline label="Title">Enter your title</singleline></h2>
<p><multiline label="Description">Description</multiline></p>
</td>
<td align="left" valign="top" width="20"><img src="/images/00.gif" height="1" width="20" border="0"></td>
<td align="left" valign="top" width="120"><img src="/images/001.jpg" editable="true" label="Image" width="120" border="0"></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top" width="580"><img src="/images/00.gif" height="20" width="1" border="0"></td>
</tr>
</table>
I need the text inside the tag to be flush with the top of the table. Currently the /images/001/jpg is flush, but the text is 5 pixels below the edge of the table.
I'm using vertical-align: top in the CSS, have tried border-spacing: none, border-collapse: collapse, and border: none. None of them solved the problem.
Using margin-top: -5px; on the tag solved the problem in standard browser testing, but wasn't supported by some email clients.
this is Ros from Campaign Monitor. What isn't entirely obvious is that the <singleline> and <multiline> tags convert into <p>your content</p>
...when imported into the Campaign Monitor editor. It's these <p> tags that are creating this extra padding - here's an example.
The easiest way to avoid this is to add p { margin: 0; padding: 0; } to your CSS styles.
Hopefully this fixes this issue for you. Note that we have a forum for answering questions like this, so feel free to post your template code there in the future.
Many thanks to everyone who contributed here!
Ros' suggestion suffices most of the time, but Gmail removes your header styles which leaves the inserted p tags with gmail's default margin top and bottom.
An alternative to get around this is by adding a div tag within your multiline tag. This will successfully prevent Campaign Monitor from wrapping your content with a p tag.
Here is a structure example:
<multiline>
<div>
Your Content Goes Here.
</div>
</multiline>
Put
valign="top"
on your TD for the text. If the email client doesn't recognize CSS it should recognize the standard HTML attribute.
Also, if that doesn't fix it, can you edit your Q and add the definition for "title" CSS definition that you are using on that .
I'm assuming your referring to the text inside the H2 tag.
Create a class for the <h2>
.noPad {
padding-top: 0px;
}
Or don't use the H2 and just use a span or div element.
It could just be the line-height of the text as opposed to margin/padding - check that as well