Using Watir, I want to click on a table cell containing the text "ad.03.IL.R.nC.nOwn.Wait"
The HTML is:
<span onclick="javascript:showListMembers(343);" style="text-decoration:none; border-bottom: 1px solid Gray;">ad.03.IL.R.nC.nOwn.Wait</span>
What is the correct Watir statement?
matches = b.spans(:text => "ad.03.IL.R.nC.nOwn.Wait")
Use the plural method unless you're sure there's only one possible match. You can also do regex stuff
matches = b.spans(:text => /ad.03.IL.R.nC.nOwn.Wait/)
Span elements aren't table cells in the proper sense. Table cells don't normally have useful metatags
Related
The requirements from the customer state that a record's Comment and Description fields must be displayed in the same cell but the text of the Comment must be displayed in red while the Description should be black. Using a mutator, I can combine the 2 fields and display them in one cell, but I haven't seen how to make one have red text and the other black text within that cell.
Is there a way?
Thanks,
Matt
I wouldnt bother doing that, just use a Customer Formatter function
formatter:function(cell, formatterParams, onRendered){
return '<span style=color:red>' + cell.getRow().getData().Comment + '</span><P><span style=color:black>' + cell.getRow().getData().Description + '</span></p>';
}
For a custom React component I wrapped Tabulator and would love to support custom heights for a table header and indvidual rows. I only found row resizing in the documentation, but no information about how to set a custom height in the data (or through an API call).
It's not clear to me from your question if you want to control the height of all rows or just particular ones.
If you want to control height based on data you can use a row formatter. Works well in my experience.
There is also this answer about overriding the CSS for rows: Adjust tabulator row height
.tabulator-row {
position: relative;
box-sizing: border-box;
min-height: 22px;
background-color: #fff;
}
Im trying to do something with my opencart store, i want to remove wrong formatting from all product descriptions, so i made one export in excel of all my products and descriptions ( products are near 8000) and i want to do this io this is my exported description in one cell in excel:
<span style="font-weight: bold; color: rgb(37, 37, 37); font-family: "Myriad Pro", Verdana, Arial, sans-serif; font-size: 13px;">Единичен апликатор, с който лесно се нанасят сенките за очи.</span>
i want to delete everything between
style="font-weight: bold;
and
">
(because i need to use onlu bolded words to stay)
Can i use some formula in excel to do this?
Thanks!
If your text is in cell A1 use the below formula,
=LEFT(A1,FIND("font-weight: bold",A1)+17)&MID(A1,FIND(""">",A1),LEN(A1))
The formula searches for the text font-weight: bold in the cell A1 and strips the left most part till the text. The next part is finding the "> and stripping the character after that. The & is to concatenate both
I want the columns of my table to adjust its width to the biggest element.
Like doubleclicking an excel-column...
I've tried lots of attributes and solutions of other questions but nothing really did what i wanted.
Here are my settings for the dataTable which is nested in a p:scollPanel:
<p:dataTable scrollable="true" scrollWidth="auto" scrollHeight="390"
tableStyle="width: auto; white-space: nowrap; font-size: smaller"
id=carTable" var="vehicles"
value="#{dgBean.vehicles}">
Using:
primefaces 6.0
jsf 2.2.1
UPDATE:
I don't know why, but it seems like table-layout: auto is not used AND two divs are generated. 1 for the Header of my table and the other for the body of my table.
That's why the first layout I've posted shows up and the header and body fit nicely on their own but the header doesn't fit the body.
Generated HTML:
<div class="ui-widget-header ui-datatable-scrollable-header" style="width: 1199px;">
<div class="ui-datatable-scrollable-header-box" style="margin-right: 15px;">
<table role="grid">
<thead id="j_idt5:j_idt14:carTable_head">...</thead>
</table>
</div>
</div>
<div class="ui-datatable-scrollable-body" tabindex="-1" style="height: 390px; margin-right: 0px; width: 1199px;">
<table role="grid">
<thead class="ui-datatable-scrollable-theadclone" style="height: 0px;">...</thead>
<tbody id="j_idt5:j_idt14:carTable_data" class="ui-datatable-data ui-widget-content" tabindex="0">...</tbody>
</table>
</div>
So it seems like 2 tables are generated. Does anyone have a clue how to fix this using pf?
UPDATE from comment
Applying
.ui-datatable-scrollable-header-box table, .ui-datatable-scrollable-footer-box table, .ui-datatable-scrollable-body table {
table-layout: auto;
}
to the Showcase
produces (deleted my former images as reputation is not high enough for more than 2):
Showcase with edited css
I want the columns of my table to adjust its width to the biggest element.
PrimeFaces DataTable default style uses table-layout: fixed;. So if only that, replace your tableStyle content with table-layout: auto; to make usage of the automatic table layout algorithm as stated on w3schools.com:
The column width is set by the widest unbreakable content in the cells
From everthing you wrote (including comments) until now, I assume you want a vertically and horizontally scrollable DataTable that automatically sizes its columns to its content.
I claim this is not possible with the built in functionalities of PrimeFaces DataTable, because as you allready noted, if you make the DataTable scrollable, the rendered output differs in that there are different tables for the header, body and footer (to make header and footer sticky).
I don't get it why its not working.
Column sizes calculated with the automatic table layout algorithm with table-layout: auto; will differ for all three tables (except they incidentally have the same broadest unbreakable content, like header and footer in ShowCase). The difference in size gets relativated if the table gets broader (because additional space is equaly distributed to the columns), so it might look like everthing is OK as Kukeltje commented. But if you shrink the width of the table, differences get visible.
| broadest content | stretched by 1000
--------------------------------------------------------
| column 1 | column 2 | column 1 | column 2
--------------------------------------------------------
header table | 2 | 3 | 502 | 503
body table | 4 | 6 | 504 | 506
footer table | 2 | 3 | 502 | 503
As you maybe have noticed, the rendered body table also contains the header content but hidden. So assumed the header content would be broader than the body content, everything would be fine at least for the header and body table.
| broadest content
========================================
| column 1 | column 2
========================================
header table | 5 | 7
----------------------------------------
hidden header part | 5 | 7
body part | 4 | 6
________________________________________
body table | 5 | 7
----------------------------------------
footer table | 2 | 3
The easiest workaround is to disable scrollability and enable pagination. With this, you have a more or less controllable height of the DataTable (with rows attribute) while preserving the remaining requirements.
From my point of view the paginator looks like it is just replacing the vertical scrolling.
More or less (therefore the easiest workaround). Most important thing is that only one table is renderd and therefore header, body and footer content is used to calculate the column widths:
| broadest content
---------------------------------
| column 1 | column 2
---------------------------------
header part | 2 | 3
body part | 4 | 6
footer part | 2 | 3
_________________________________
full table | 4 | 6
How does that aid my horizontal problem?
With table-layout: auto; you get horizontal scrolling within the paginator viewport out of the box.
Another approach is to disable scrollability and wrap the DataTable with a ScrollPanel. This has some disadvantages in that the header is scrollable too and there are issues with resizing you have to handle, so I would not recommend it.
Best solution will be a customized renderer (note the hidden header content in the rendered body table if scrollability is enabled and extend vice verca) and/or customized JS/CSS for your DataTable, but thats out of scope of your question.
Easiest solution would be to not insist on automatic column sizing according to table content and take DataTable with scrolling capabilities as is.
i had the same issue header and table content width was different, i created below css and worked like a charm for me, don't have to remove anything like filters or scrollbars
.ui-datatable-scrollable-header-box table th, .ui-datatable-scrollable-footer-box table th, .ui-datatable-scrollable-body table td{
width: 20% !important;
}
I am trying to write an Excel VBA script to navigate to a website and select from a drop-down list using the text in the list item, NOT the value of the index. By examining the HTML code, I can see that the values in the drop-down list appear to be integers with no recognizable pattern and do not appear to correlate to the text shown for the entry in the drop-down list.
<option value="246">new2</option>
<option value="245">new</option>
<option value="196">test</option>
I can successfully use the following command:
ieDoc.getElementById("viewMaintainFixedCombustible_fixedCombustible_fireZoneId").Value = 246
To select the item "new2" from the drop-down list, by sending the value 246. Or, I could send 245 to select "new". However, the elements in the list are always changing, so selecting by value (246, 245, etc.) is impractical. Thus, I am searching for a way to select an entry from the drop-down list (e.g. "new2") by sending the text name of the entry (e.g. "new2") in VBA.
Does anyone have a method for how to do this?
Try below sample code to set dropdown list by text.
Set drp =ieDoc.getElementById("<id of your dropdown>")
For x = 0 To drp.Options.Length - 1
If drp.Options(x).Text = "new2" Then
drp.selectedIndex = x
Exit For
End If
Next