I want that my table is only visible if the size of the list opleidingen is not null.
But altough the list is empty, he still shows the header of the table and the icons. What do I do wrong?
Thankyou
<table th:if="${opleidingen.size() != 0}">
<theader>
<tr>
<th>Code</th>
<th>Titel</th>
<th>Thema</th>
<th>Delete</th>
<th>Pas Aan</th>
</tr>
</theader>
<tbody>
<tr th:each="opleiding: ${opleidingen}">
<td><span th:text="${opleiding.getCode()}"/></th>
<td><span th:text="${opleiding.getTitel()}"/></th>
<td><span th:text="${opleiding.getThema()}"/></th>
<td><img src="../static/Delete.gif"/></th>
<td><img src="../static/Edit.gif"/></th>
</tr>
</tbody>
</table>
Keeps being visible: the header of the table theader tekst and the images. Why, since there are no items to be shown, the whole table shouldn't be shown?
You need to have Thymeleaf render the template, otherwise, the Thymeleaf specific attributes will not do anything.
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>
I am new to thymeleaf, I have a little problem. I am successfully getting data from database and displaying to table formate, here i am getting true/false from database. Same thing displaying in table formate.
But i want to show true as yes and fasle as no in front end.
<tbody>
<tr th:each="trn,iterStat : ${trans}">
<td th:text="${trn.txn}">Yes</td>
</tr>
</tbody>
How to change my code?
Different ways to go about this depending on what you want your html to look like:
<tbody>
<tr th:each="trn,iterStat : ${trans}">
<td th:text="${trn.txn ? 'Yes' : 'No'}" />
</tr>
</tbody>
or
<tbody>
<tr th:each="trn,iterStat : ${trans}">
<td>
<span th:if="${trn.txn}">Yes</span>
<span th:unless="${trn.txn}">No</span>
</td>
</tr>
</tbody>
Am using a view with table (simple html tags) one like below to render in to two different views.
This table is inside MVC views>shared folder so does indicating its used by two different views.
View-1 needs all columns to display; But view-2 doesn't need column "Delete". How to conditionally render this shared (table-view) view showing only columns that the asking view needs?
<table id="example" class="display" style="min-width: 100%">
<thead>
<tr>
<th>Item</th>
<th>ItemDesc</th>
<th>UM</th>
<th>Qty</th>
<th>Category</th>
<th>Comment</th>
<th>Delete</th> /*View-2 don't need this*/
</tr>
</thead>
<tbody>
#foreach (var model in Model){
data goes here for respective <th> as <td> by getting from a model
<td>model.Item</td>
<td>model.ItemDesc</td>
<td>model.UM</td>
<td>model.Qty</td>
<td>model.Category</td>
<td>model.Comment</td>
<td>model.Delete</td> /*View-2 don't need this*/
}
</tbody>
How to do this in ASP MVC 5 views?
You can just store a token value inside Viewbag or Tempdata as :
#Viewbag.show="no";
if(#Viewbag.show!="no"){
<td>model.Delete</td>
}
else{
<td></td>
}
One of the solution is pass the additional information in the modal of the view like this
if(modal.EnableDelete)
<td>Delete</td>
I want only those children who are publish in content folder.
this is my below code:
<umbraco:Macro runat="server" language="cshtml">
#foreach (var item in Model.Children)
{
<h3 class="vacancyH">#item.jobTitle</h3>
<table class="vaccTbl">
<tr>
<td class="vaccDetailTitle">Salary & Benefits:</td>
<td class="vaccDetailDesc">#item.salaryBenefits</td>
</tr>
<tr>
<td class="vaccDetailTitle">Employment Type:</td>
<td>#item.employmentType</td>
</tr>
<tr>
<td class="vaccDetailTitle">Department:</td>
<td>#item.department</td>
</tr>
<tr>
<td class="vaccDetailTitle">Report to Position:</td>
<td>#item.reportToPosition</td>
</tr>
<tr>
<td class="vaccDetailTitle">Location:</td>
<td>#item.location</td>
</tr>
<tr>
<td class="vaccDetailTitle">Date of Description:</td>
<td>#item.businessArea</td>
</tr>
<tr>
<td class="vaccDetailTitle" valign="top">Summary:</td>
<td class="tablep">#item.vacancySummary</td>
</tr>
<tr>
<td colspan="2" valign="middle"><img src="/images/wordicon.jpg" alt="" class="docIcon" />Download the Full Job Description</td>
</tr>
</table>
<div class="vaccCloseDate">Application Deadline: #item.applicationDeadline.ToString("dd MMMM yyyy")</div>
<div class="vaccApplyForPosition">Click here to apply</div>
}
</umbraco:Macro>
By this i get the all children which are not published..
Now i want the only published children.
What do you mean by published? What you are doing will only display published items, this is how umbraco works. Using where("visible") relies on you having created a property on one of your doc types called umbracoNaviHide and setting it to true in order to hide items. If what you have is not working then there is another reason for it.
Are your unpublished items greyed out in the content tree?
Try right click in top level content node and republish entire site.
Make sure your browser isn't caching something so clear the cache.
Failing all this simply delete umbraco.config in your app_data folder.
Umbraco does not render unpublished items.
In my code they have one table. In that table the row is not fixed. it may added by everyone.
I that table every third column text should be "Pending". It is the condition. I dont know How to check that every third column text have "Pending".
I was trying this. I dont know weather its right or not.
page.should have_selector('tbody tr td:nth-child(3)', text: Pending)
Its my html
<table id="thisis" class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>true</td>
<td>
<span class="label label-success">Pending</span>
</td>
<td>
<span>View</span>
<span>/</span>
<span>Edit</span>
<span>/</span>
<span>Publish</span>
</td>
</tr>
<tr>
<td>test2</td>
<td>true</td>
<td>
<span class="label label-success">Pending</span>
</td>
<td>
<span>View</span>
<span>/</span>
<span>Edit</span>
<span>/</span>
<span>Publish</span>
</td>
</tr>
</tbody>
</table>
Thanks for your valuable answers.
Method 1: Use count
Say you have 10 rows in a page, and given your status columns have class "status". Then
expect(page).to have_css(".status", text: "Pending", count: 10)
Method 2: Use scope
To code a table with data, a convention is to assign unique id to each row at least. This will help lots of functions not only the test.
What you need to do is:
Assign an unique CSS id with data id for each row
Add a "status" class for status column for easy identifying
You view will look like this
<tr id="123-row">
<td>bla blah</td>
<td><span class="label label-success status">Pending</span>
...
</tr>
Then, for test, you can do this in Capybara:
within "##{item.id}-row .status"
expect(page).to have_content("Pending")
end