I have the fallowing code :
<table id="table1" class="class1">
<thead>...<thead>
<tbody>
<tr id="1">
<td class>cell1</td>
<td class>cell2</td>
<td class>cell3</td>
<td class>cell4</td>
</tr>
<tr id="2">
....
<\tr>
...
I need to go over all the rows and check if cell number 3 has "cell3" as text . (for starters)
then after ive found it i need to keep checking the rows for a different string in cell number 3
I've tried:
string="cell3"
rows=browser.table.rows
rows.each {|tr|
if tr.td( :index =>2).text ==string
puts " Found #{string}"
string="cellK"
end
}
Im doing it in a loop since there are several strings i need to find.
But im getting the fallowing error :
unable to locate element, using {:index=>2, :tag_name=>"td"}
Any advice ?
How can i get the text of a td?
and why cant i find td by index ?
I am guessing that the problem is the header row in the thead. The table head is probably something like:
<thead>
<tr id="0">
<th class>heading1</th>
<th class>heading2</th>
<th class>heading3</th>
<th class>heading4</th>
</tr>
<thead>
Notice that there is a tr. table.rows will therefore include the header row. Also notice that it is using th instead of td cells. It is likely here that watir cannot find the td with index 2, because there are no tds at all in this row.
Assuming this is the problem, you have a couple solutions.
Solution 1 - Make th and td equivalent by using cells
Inside the loop, use cell instead of td:
rows.each {|tr|
if tr.cell( :index =>2).text == string #Note the change here
puts " Found #{string}"
string="cellK"
end
}
Table#cell matches td and th cells. This means that cell(:index, 2) would match the 3rd td or th in the row. When watir checks the header row, it will now find a value.
Solution 2 - Ignore the thead
When getting the rows to check, confine the rows collection to only include rows in the tbody:
rows = browser.table.tbody.rows
This would then ignore the riws in the thead that are causing the problem.
Related
I'm having some problems formatting a README on github.
This is the raw README:
| Italic | Block letters |
:-------------------------:|:-------------------------:
![](outputs/output_Biotouch/18-15_02-02-2018/Identification/ITALIC/ITALIC_movementPoints_cmc.png) | ![](outputs/output_Biotouch/18-15_02-02-2018/Identification/BLOCK_LETTERS/BLOCK_LETTERS_movementPoints_cmc.png)
![](outputs/output_Biotouch/18-15_02-02-2018/Verification/ITALIC/ITALIC_movementPoints_notbalanced_roc.png) | ![](outputs/output_Biotouch/18-15_02-02-2018/Verification/BLOCK_LETTERS/BLOCK_LETTERS_movementPoints_notbalanced_roc.png)
![](outputs/output_Biotouch/18-15_02-02-2018/Verification/ITALIC/ITALIC_movementPoints_notbalanced_frrVSfpr.png) | ![](outputs/output_Biotouch/18-15_02-02-2018/Verification/BLOCK_LETTERS/BLOCK_LETTERS_movementPoints_notbalanced_frrVSfpr.png)
It is just a table with relative references to some images.
The referenced images have all the same dimensions.
This is what comes out:
Why are the images contained in the central row smaller?
The images in the table have all the same dimension.
The "problem" is that to every image a border is added. The border is white on even rows, and it is light gray on odd rows.
The images in the even rows seem to not have a border because the background and the border are both white.
(thanks to Shawna of the github support team)
You can use these html tags for this,
<table>
<tr>
<td> <img src="img1.png" alt="1" width = 360px height = 640px ></td>
<td><img src="img2.png" alt="2" width = 360px height = 640px></td>
</tr>
<tr>
<td><img src="./Scshot/cab_arrived.png" alt="3" width = 360px height = 640px></td>
<td><img src="./Scshot/trip_end.png" align="right" alt="4" width = 360px height = 640px>
</td>
</tr>
</table>
For More Information ,you can see here Link
I have a flex table in GWT , it has 3 rows . Now I want to draw a line / separator after every row .(just separator between rows, Not for column)
can i acheive this ..
here's the current screen
You can see 3 rows , just need a clean and nice line between them
A FlexTable is rendered as just a <table> with their cells being simple <td>s. So in your CSS you can include something like this:
.tableWithRowsDelimiter td {
border-bottom: 1px solid #c9c9c9;
}
And then assign the tableWithRowsDelimiter style to your FlexTable, via ui.xml:
<g:FlexTable ui:field="yourFlexTable" class="tableWithRowsDelimiter"/>
Or in your Java code:
yourFlexTable.setStyleName("tableWithRowsDelimiter");
I want to get different colors orders (table row) in the admin list of orders, depending on its status. I think the simplest is to add a class to the status of the when rendering a table of orders and the corresponding CSS code, but I have no idea how to do it.
I have:
<tr class="data-row" data-bind="css: {'_odd-row': $index % 2}" data-repeat-index="0">
need:
<tr class="data-row pending" data-bind="css: {'_odd-row': $index % 2}" data-repeat-index="0">
Sorry for my English.
Find answer. Modify vendor/magento/module-ui/view/base/web/templates/grid/listing.html
<tr class="data-row" repeat="foreach: rows, item: '$row'" css="[rows[$index].status]: true, '_odd-row': $index % 2">
I'm still waiting for a better solution
Since nowrap on td element doesn't seems to work in IE, see this question, I am in desperate need of help how to add a span element with nowrap to every cell in a Dojox Datagrid without having to define field formatters to accomplish this.
See jsfiddle here http://jsfiddle.net/HkxHZ/4/
Using this css I get what I want in Chrome and FF, i.e. no word wrap and overflow hidden. But it doesn't work in IE..
<style type="text/css">
.dojoxGridRowTable {
table-layout: fixed;
width: 0px;}
.dojoxGrid .dojoxGridCell {
text-align: left;
overflow:hidden;
white-space:nowrap;}
</style>
This method is like auto-size in that is will make the width of each column in the DataGrid big enough to show your data with no wrapping.
What you should do is calculate the proper width for each column of the grid layout based on PX size of the text in the column description and data for that column. This should be done before creating the grid layout.
Here is how you get the proper width in px. Add the following html to your page:
css:
#test
{
position: absolute;
visibility: hidden;
height: auto;
width: auto;
}
<div id="test"></div>
1) Get the font size used in your DataGrid
2) Get the div object and set the font size to what is used in the grid
<div id="test"></div>
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = grid_fnt_sz;
3) Place each column description and data item intended for your DataGrid into the hidden div:
tst_item.innerHTML = "Your data";
var widthPX = (tst_item.clientWidth + 1); //Width of text in PX
Store this widthPX in an array for each column keeping only the largest found for the column.
4) When creating the layout for your grid, set the width for the column to the largest width from your column description and data for that column.
This method ensures that width of each column will be big enough to show your data without wrapping. Depending on your needs, you can tweek the logic to do what you need. This might not be feasible with large amounts of data. But, it works great for me.
<g:Grid>
<g:row>
<g:customCell>
<g:HTMLPanel styleName="{style.loginPrompt}">
<div>
<ui:msg description="LoginPrompt">Please <b>Log In</b></ui:msg>
</div>
</g:HTMLPanel>
</g:customCell>
</g:row>
...
I want that my cell text will be in second cell like in java:
Grid g = new Grid(5, 5);
g.setText(0, 1, "asdf");
If you want 5 rows and 5 columns, I think you have to define them all in the UiBinder using the appropriate number of g:row and g:cell (or g:customCell). There's no equivalent to setText but you can do the equivalent of setHTML by using a g:cell (and g:customCell is equivalent to setWidget).
<g:Grid>
<g:row>
<g:customCell><!-- whatever --></g:customCell>
<g:cell>asdf</g:cell>
<!-- continue here for 5 rows, 5 cells per row -->