How to merge few cells in semantic-ui-react as we normally do using colspan in html table?
https://react.semantic-ui.com/collections/table#types-pagination
I tried different options - nothing seems to help!!
The value of the colSpan property needs to be either in quotation marks ("3") or in curly braces ({3}). Otherwise it will be an incorrect React JSX syntax.
<Table.Cell colSpan="3">
or
<Table.Cell colSpan={3}>
Related
I'm building a shiny app and I want to emphasize a summary row in some of my dataTable outputs. I would like all the values in the second to last row to be underlined. I'm not strong enough with HTML or CSS to know where to start with this. I've looked through a bunch of DT style guides but can't find anything helpful
You can paste an underline tag around the entries you want to underline, then set escape = FALSE in DT.
escape property in DT: https://rstudio.github.io/DT/ see section 2.10 Escaping Table Content
Example of adding tags around some content: paste0("<u>", "original content", "</u>")
I am looking to open an HTML/CSS file with MS Word. I have a table in the file and would like to set the table properties, text wrapping to NONE using CSS. I understand Word should be able to interpret the HTML/CSS.
I cannot find any CSS to apply NO text wrapping to an entire table. Can anyone help?
If you are writing your styles separately, you can define your css as such:
table th,
table td {
white-space: nowrap;
}
That is going to make ALL table header and regular cells not wrap, so be aware of that. If you are trying to make this change and you need to target a cell directly, you would have to make the above CSS more specific by adding class names to the cells you want to target. Or add the CSS inline to the cell: <td style="white-space:nowrap"></td>
I'm doing functional testing using CasperJS's test class, and can't seem to select elements by their text values. My goal is to check that a class of div is visible, and then check it has the value I expect.
I've tried using the CSS3 selectors mentioned on CaspersJS' selector page, but must be doing something wrong. None of the following work for me (all enclosed in ""):
div#myid[text()='sometext']
div#myid[text='sometext']
div#myid[text=sometext]
div#myid:contains('sometext')
div#myid:contains(sometext)
Any pointers as to how I can select a specific element based on it's text value?
Try:
var x = require('casper').selectXPath;
this.test.assertExists(x('//*[#id="myid"][text()="sometext"]'), 'the element exists');
Thanks for the comments above - I ended up going with using jQuery (as it was being loaded on the client) through evaluate() calls in the CasperJS tests.
I have some data that I'm reading from JSON and writing into a Table.
Currently looks like following.
<table>
<tr><td>Feature 1</td><td>true</td><td>false</td></tr>
<tr><td>Feature 2</td><td>false</td><td>false</td></tr>
<tr><td>Feature 3</td><td>true</td><td>true</td></tr>
</table>
What I want to do is leave the true/false data as it is but use CSS to turn the data into Tick/Cross or smiley / frown images.
I thing I have seen CSS3 notation for this, but I can't find it.
What you can you id manipulate the HTML a bit and add classes to the TD's with the values true/false.
<tr><td>Feature 1</td><td class="true">true</td><td class="false">false</td></tr>
In the CSS you can use the attribute selector or in this class just the class selector
td.true {
}
td.false {
}
You might also be able to hide the text with the text-indent property. Alternatively you can just output the true/false as a class rather than HTML text in the cell.
I have been trying to use the new collection in plone 4.2.1 to filter a set of documents. I can not use the 'and' operator to get the result I need.
For example I have the following documents:
document1, tag 'yellow'
document2, tag 'yellow', 'red'
document3, tag 'red'
How do I filter the collection to show only document 2?
It's not possible with the new-style-collections, because of the missing and/or-operators. :(
It is not possible (the way you want), but I have made a (very ugly) hack (which also has some minor bugs (basically if the tag contains spaces) in collective.ptg.quicksand
1) the tags are added to the content as (css) classes
2) A javascript (or css file) hides those without the right class.
This would mean that document1 has 'div class"yellow"' and document2 has
div class="yellow red". Then you hide all the divs with css (or javascript) and shows document2 by
.red.yellow {display: block} or similar.
You can see the idea here :http://products.medialog.no/galleries/quicksand
(although here I have not made any tags containing both (red and yellow), but that should be just to remove the "split" in the init py file, line 82 here:
init.py">https://github.com/collective/collective.ptg.quicksand/blob/master/collective/ptg/quicksand/init.py