the first column is clickable and works fine. But now, I'd like to make the entire row clickable based on that same URL. And as each row prints, I'd like each row clickable with that respective URL that is dynamically created.
Sort of like wrapping all the td's for each row within "< a > < /a >"
But not sure how to do ... I saw an example using a databind click in the < tr >. But I'm not sure how to wrap all the tds within that URL, etc.
TIA.
<tbody data-bind="foreach: items">
<tr>
<td style="width: 300px"><h4><a data-bind="text: Name, attr: {href: $root.rootBaseUrl() + 'Items/' + ID}"></a></h4></td>
<td style="width: 400px"><h4><span>Link this as well</span></h4></td>
<td style="width: 400px"><h4><span>Link this as well</span></h4></td>
</tr>
</tbody>
Related
I was browsing the last hours to find a solution for my problem with latest puppeteer (2.0.0) / chromium 78.0.x to get our printing system working. We allow to setup page breaks in tables, which worked find in PhantomJS renderer, but not in the puppeteer/chromium solution.
Beside many little difference in global css and printing PDF header/footer the printing of tables was the last problem (hopefully).
It turns out that the "page-break-before: always" is simply ignored.
Example:
<table>
<thead> ... </thead>
<tbody> ...
<tr style="page-break-before: always;"> ...should be on next page ... </tr>
</tbody>
</table>
Some of the Chrome forum articles point out, this has been solved.
So the question is what is causing the problem.
Regards,
Andre
PS) Later we found now: put a "display: block" on all tags of the table solves the problem. Maybe that helps someone. Any comments on that?
<table style="display: block;">
<thead style="display: block;"> ... </thead>
<tbody style="display: block;"> ...
<tr style="display: block; page-break-before: always;"> ...is now on the next page ... </tr>
</tbody>
</table>
Bad news for the solution we provided above. This destroys the feature of having table headers on each page.
setup 1)
Setting "display: block;" for the thead will disable the feature of having the table header on each page.
==> no page break
setup 2)
Set the thead to "display: table-header-group;" and tbody to "table-row-group" then the chrome will ignore the page-breaks.
==> no table headers on each page
setup 3) Having the thead: "display: table-header-group;" and the tbody: "display: block" is destroying the column structure. The body will be rendered only on the first column.
==> Destroys the table. the body is just in the first column
Here comes our hack to solve the problem. we use setup 3, with this:
- we build a table with just one column
- the column contains a table with all columns we really want to render
- the column widths are set to fix values (that was anyway the case in our rendering system)
<table>
<thead>
<tr>
<td> <table> .... the header of the real table </table> </td>
</tr>
</thead>
<tbody style="display:block;">
<tr>
<td>
<table> .... one row of the real table </table>
<td>
</tr>
<tr>
<td>
<table> .... another row of the real table </table>
<td>
</tr>
</tbody>
</table>
The following HTML code displays a table which is a link to another site. That is, clicking on any pixel in the inner table (even white space) invokes the link. How do I code this in a Wiki using pipes syntax?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How To Convert A Wiki Table To A Link?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;">
<tr>
<td>
<a href="http://google.com">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="text-align: left;">M pigeons</td>
<td style="text-align: right;">000</td>
</tr>
<tr>
<td colspan="2">into N holes</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</body></html>
Pipes Syntax for this table-in-a-table looks like this (but without the ... )
{| border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;"
|
{| border="0" cellpadding="0" cellspacing="0" width="100%"
|-
|style="text-align: left;"|M pigeons
|style="text-align: right;"|000
|-
|colspan="2"|into N holes
|}
|}
How do I achieve the effect of the ... as in the HTML code above?
In a nutshell: you can do this with MediaWiki's external link syntax and a single-line HTML table, but it won't work if you have enabled HTML tidying.
MediaWiki links
In MediaWiki, the default settings are to disallow <a>...</a> tags in wikitext. This is for security reasons: if your wiki is publicly editable and <a>...</a> tags were allowed unchecked, anyone could add arbitrary JavaScript to your site, by adding links like <a onmouseover="alert(1)">foo</a>.
Instead, you add links to wikitext in two different ways. For internal links to other pages on the same wiki, you use [[Page name|display text]], which produces something like display text. For external links, you use [http://www.example.com Example], which produces a link like <a rel="nofollow" class="external text" href="http://www.example.com">Example</a>.
For what were probably Very Good Reasons At The Time, you can insert newline characters into the display text of internal links, but not external links. So this produces a valid link:
[[Page name|display
text]]
But this is just output as-is (with the URL itself linked):
[http://www.example.com display
text]
This will be important later on.
MediaWiki tables
While MediaWiki doesn't allow <a>...</a> tags in wikitext, it does allow a subset of HTML tags. This includes <table>, <tr>, <th> and <td>, which means that there are actually two ways to make tables in wikitext. The first is using wikitext table syntax, like you have done in your question:
{|
| Row 1, cell 1
| Row 1, cell 2
|-
| Row 2, cell 1
| Row 2, cell 2
|}
The second is by using HTML table elements:
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>
For wikitext table syntax, you need to add newline characters for the table to render properly. However, for HTML table tags, you can do everything on one line, like <table><tr><td>Foo</td></tr></table>.
How to put tables in links
Putting a table inside a link in MediaWiki is a matter of putting the appropriate table syntax inside the appropriate link syntax. If your link is an internal link, you can choose either of the table syntaxes:
[[Page name|
{|
| Foo
|}
]]
[[Page name|
<table>
<tr>
<td>Foo</td>
</tr>
</table>
]]
These will both produce something like the following HTML:
<a href="/wiki/Page_name" class="mw-redirect" title="Page name">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
</a>
If your link is an external one, then because the external link syntax doesn't accept newline characters, you are limited to using HTML table tags.
[http://www.example.com <table><tr><td>Foo</td></tr></table>]
This will produce something like the following HTML:
<a rel="nofollow" class="external text" href="http://www.example.com">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
</a>
In your case, the following code should do what you are trying to do:
{| border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;"
| [http://www.google.com <table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td style="text-align: left;">M pigeons</td><td style="text-align: right;">000</td></tr><tr><td colspan="2">into N holes</td></tr></table>]
|}
Why you might not want to do this
While putting table tags inside links is allowed in HTML 5, it is not allowed in HTML 4.01 or XHTML 1.0. When I tested your HTML with the W3C validator, it gave me the error 'document type does not allow element "table" here'.
I believe that more recent versions of MediaWiki use HTML 5, so this might not be an error per se. However, if your wiki uses HTML tidying software, then tables inside links might be interpreted as broken HTML, and "fixed" for you. When I tested the above code on Wikipedia, which I think currently uses the HTML 5 tidying algorithm, the link was rendered before the table.
<table border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;">
<tr>
<td><a rel="nofollow" class="external text" href="http://www.google.com"></a>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="text-align: left;">M pigeons</td>
<td style="text-align: right;">000</td>
</tr>
<tr>
<td colspan="2">into N holes</td>
</tr>
</table>
</td>
</tr>
</table>
So, if you really want to do this, then go ahead, but beware that there may be pitfalls.
One last thing: if you want to use <a> tags in wikitext as-is, it is possible to enable the $wgRawHtml option. However, do not do this if your wiki is publicly editable! It will enable people to add random JavaScript to your site, which is Not A Good Idea.
In the following HTML I'm using Bootstrap. The real display as shown in image below has two columns too far apart. How can I make them display a bit closer to each other.
NOTE: For the sake of brevity of this post, I've simplified the html a bit. The real html involves some programming code - such as foreach loop and data fetch from database etc - as that all is not related to this post.
<div class="row">
<div class="col-md-12">
<table class="table table-borderless table-condensed">
<thead>
<tr><th></th><th></th></tr>
</thead>
<tbody>
<tr>
<td class="col-md-2">
item1
</td>
<td class="col-md-10">
<span>item2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Display:
UPDATE: If I change first column <td class="col-md-2"> to <td class="col-md-1"> and the second column <td class="col-md-10"> to <td class="col-md-11"> the content in first column gets wrapped (something I don't want since all the content in first column is of fixed length and hence it does not need to be wrapped).
To address your updated code with the first column changed to col-md-1, you can add text-nowrap to solve your wrapping issue:
<td class="col-md-1; text-nowrap">
<td th:remove="all-but-first">
<span th:each="groups : ${userView.user.groupMemberships}">
<span th:text="${groups.group.name}"></span>;
</span>
</td>
I was trying to display the first two rows returned in th:each, so I tried displaying just the first row at first and it didn't work.
How do you display just the first row and also what should we do if we want to display just the first two or three rows in th:each?
The attribute th:remove is used for removing prototyping generated tags.
As an example:
<table th:remove="all-but-first">
<tr th:each="user : ${users}">
<td th:text="${user.name}">John Apricot</td>
</tr>
<tr>
<td>Martha Apple</td>
</tr>
<tr>
<td>Frederic Orange</td>
</tr>
</table>
This means that will remove the second and third tr, leaving only the tr used for iteration. More details here.
So if you only want to display the first element of your collection, there is no need to perform the iteration, you could simply access it by index (or even key if it's a map).
Example:
<td>
<span th:text="${userView.user.groupMemberships[0].group.name}"></span>
</td>
Displayed the first two elements of my collection and then gave a see more option to view the rest of the elements
<td>
<span th:each="groups,itrStatus : ${userView.user.groupMemberships}">
<span th:if="${itrStatus.count < 3}">
<span th:if="${itrStatus.count == 2}">,</span>
<span th:text="${groups.group.name}"></span>
</span>
<span th:if="${itrStatus.count == 3}">
, See more
</span>
</span>
</td>
I started to work on an ASP.NET MVC4 solution with the SPA template (Single Page Application).
The starting template manage some todo lists with a kind of post-it design.
I slightly modified the template this way:
no more post-it design for dislaying elements
but a table to list all elements + delete + edit button on each element
at the end of the table: an add button
I have now the ability to edit one element in a form tag like this:
<form data-bind="with: currentTodoList, validate: true">
<h1>Edition</h1>
<table>
<tr>
<td>ID</td>
<td><b data-bind="text: todoListId"></b></td>
</tr>
<tr>
<td>User ID:</td>
<td><input class="required" data-bind="value: userId" /></td>
</tr>
<tr>
<td>Title:</td>
<td><input class="required" data-bind="value: title" /></td>
</tr>
<tr>
<td>Category:</td>
<td><input data-bind="value: category" /></td>
</tr>
</table>
<p>
<button data-bind="click: $parent.saveTodoList">Save</button>
<button data-bind="visible: todoListId, click: $parent.deleteTodoList">Delete</button>
<button data-bind="click: $parent.showGrid">Cancel</button>
</p>
</form>
As you can see above, I set the validate data-binding on the form tag and I have some input element with the class required.
When I test this implementation it doesn't work as expected. Example:
If I clear (empty) the userId field (which is required) I have a red validation message (picture 1). OK.
If I fill this userId field again, the red validation messaged disappeared. OK.
Then if I clear (empty) the title field (which is also required) I have the red validation message next to the userId field (picture 2). NOK.
The inverse is also true: userId <--> title. Any idea where is the problem?
Here is a link to download my test VS2012 solution to reproduce the problem.
Ok, so I played with your markup a little, with slight modification to the view model (not using a list, but editing a single entry).
Take a look at this jsfiddle - http://jsfiddle.net/Zxjrb/1/
I have added a span for validation message for ID and User ID, skipped the span for Title and Category.
<span data-bind='visible: todoListId.hasError, text: todoListId.validationMessage'> </span>
You can see the messages coming up, when Id or UserId field being empty, and that not happening for the title/category fields.