<tr v-for="(value, key) in this.object" :key="key">
<div v-if="value.item1 != null">
<td width="400" class="alnleft">{{value.item1}}</td>
<td width="50" class="alnright">{{value.item2}}</td>
</div>
</tr>
With the v-if I am omitting values to print in tr. But above code printing black tr and unnecessary space is getting created . Please suggest how to get rid of this
You dont ever want to place a div as the child of a tr. You can prevent the div from being inserted by replacing it with template.
<tr v-for="(value, key) in this.object" :key="key">
<template v-if="value.item1 != null">
<td width="400" class="alnleft">{{value.item1}}</td>
<td width="50" class="alnright">{{value.item2}}</td>
</template>
</tr>
Does that fix your issue?
Related
My problem is that HTML table instead of displaying Rows vertically, after some rows it starts to put them into a new column automatically, in this order:
|Row1 | Row3 | Row4 |
|Row2 |
But I only need it to go vertically just in one column:
|Row1|
|Row2|
|Row3|...
Below my table's HTML code and how I am loading in data:
<table id="coinflip-table">
<tbody id="coinflip-list">
<tr>
#if (ViewBag.CoinflipAll != null)
{
foreach (CoinFlip.Main.Models.CoinflipViewModel cfGames in Model.Coinflips)
{
<td>
<img class="coinflip-list-avatar" src="#cfGames.User1_IconUrl" />
#if (cfGames.Status != 0)
{
<span class="coinflip-vs-player">VS</span>
<img class="coinflip-list-avatar" src="#cfGames.User2_IconUrl" />
}
</td>
<td class="coinflip-list-skins">
#if (ViewBag.WeaponBet != null)
{
foreach (CoinFlip.Main.Models.WeaponWebViewModel wep in ViewBag.WeaponBet)
{
<img class="coinflip-list-skins-small" title="#wep.Name" src="#wep.ImageUrl">
}
}
</td>
<td>
<span class="coinflip-value">$#cfGames.TotalValue</span>
</td>
<td></td>
<td>
<button class="coinflip-list-action" type="button" data-toggle="modal">WATCH</button>
</td>
}
}
</tr>
</tbody>
</table>
And I cannot seem to understand the cause of it. Is there a solution to this, just to go vertically? In JS, CSS or HTML? Or the issue can be related somewhere else?
Any help is appreciated,
Cheers
you need to include <tr> tag in loop to get row foreach list
or
if you need vertical row within a column try this!
<!-- Row -->
<tr>
<!-- Column -->
<td>
<!-- Row Within Column -->
<tr>
<td></td>
</tr>
</td>
</tr>
comment below if you have any questions?
If you need your table to be built vertically you have to put your foreach loop around < tr > < /tr > elements
I have a table with 7 columns and I'd like to make two of them merge and display some nice information to the user if there's a null or empty value in a condition check.
I tried something like this, but it didn't work.
<tr th:each="pojo : ${pojoList}">
<td th:text="${pojo.a}"/>
<td th:text="${pojo.b}"/>
<td th:text="${pojo.c}"/>
<td th:text="${pojo.d}"/>
<td th:text="${pojo.e}"/>
// here I test if the value is null or empty, if so the next two columns should merge
<td th:if="${pojo.f.empty}" colspan="2" th:text="#{nice.info}"/>
// if value is not null or empty, the next two columns gets their respective values
<td th:text="${pojo.f}"/>
<td th:text="${pojo.g}"/>
<td>
<a th:href="#{/url/edit(id=${pojo.id})}">
<img width="20px" height="20px" alt="edit" th:src="#{/assets/img/edit.png}" />
</a>
<a th:href="#{/url/remove(id=${pojo.id})}">
<img width="20px" height="20px" alt="remove" th:src="#{/assets/img/delete.png}" />
</a>
</td>
</tr>
What am I not seeing here?
Got it! I used, on a hunch, <th:block> like this:
<th:block th:if="${pojo.f == null}">
<td colspan="2" th:text="#{nice.info}"/>
</th:block>
<th:block th:if="${pojo.f != null}">
<td th:text="${pojo.f}"/>
<td th:text="${pojo.g}"/>
</th:block>
I'm not sure what is not working but you can try the following:
// here I test if the value is null or empty, if so the next two columns should merge
<td th:if="${pojo.f.empty}" colspan="2" th:text="#{nice.info}"/>
// if value is not null or empty, the next two columns gets their respective values
<td th:unless="${pojo.f.empty}" th:text="${pojo.f}"/>
<td th:unless="${pojo.f.empty}" th:text="${pojo.g}"/>
But I think it is better if you going with the th:switch solution (th:switch)
I am trying to select td.col_4 within the following HTML structure using Capybara, but to no avail so far:
<div id="potentialResults">
<div class="result">
<table class="report">
<tbody>
<tr>
<td class="col_1">
<img original-title="Sources : Telephone Directory">
<u>Name 1</u>
</td>
<td class="col_2"></td>
<td class="col_3"></td>
<td class="col_4">Address 1</td>
</tr>
</tbody>
</table>
</div>
<div class="result">
<table class="report">
<tbody>
<tr>
<td class="col_1">
<img original-title="Sources : Telephone Directory">
<u>Name 2</u>
</td>
<td class="col_2"></td>
<td class="col_3"></td>
<td class="col_4">Address 2</td>
</tr>
</tbody>
</table>
</div>
</div>
So at the moment to get the text address 1 for Name 1 I do this
page.find("#potentialResults > .result > .report > tbody > tr > td.col_1 > a", text: "Name 1", match: :first).find('td.col_4').text
But where I seem to be struggling is getting the same address but using the img data-attribute as my identifier
page.find("#potentialResults > .result > .report > tbody > tr > td.col_1 > img[original-title='Sources : Telephone Directory'] + td.col_4", match: :first).text
But td.col_4 isn't exactly adjacent in this example is it?
How else would I be able to get the text when stipulating that it has to be the first match?
The css you're passing to your finders is way too lengthy. It can be shortened without running into ambiguous results.
If you want to just simply get text from td.col_4, just do:
find('#potentialResults .col_4').text
If you want the address for 'Name 1', you need to first find that element, traverse up to the parent by a few levels, then find your way back down. This is because the elements you are looking for are siblings, and Capybara doesn't really provide an easy way to find these:
find('#potentialResults .col_1 a', :text => 'Name 1').find(:xpath, '../../..').find('.col_4').text
What does it mean if you cannot expand a DOM node in the Chrome Elements view tool?
I have manually appended a very long string of html containing nested elements, but when I view the rendered page and examine the elements, only the first level element exists, with a ... for the text field. When I try to expand the selection to see the inner contents, the closing tag for the only visible element goes away, and none of the contents appear visible.
Any ideas? Malformed HTML? I really don't think it's incorrectly formatted...
I am using jQuery Mobile for this.
EDIT: Here is how I got the page to render what I wanted.
$('#myID').append(
'<li id="'+id+'" name="chat2" dsid="chat2_'+j+'" class="'+currentPage+'_chat2 ui-li-static ui-body-inherit ui-btn-up-a ui-first-child" data-icon="false">
<div class="ui-li-static-container">
<div class="'+currentPage+'_itemGrid2_wrapper" data-wrapper-for="itemGrid2" dsrefid="chat2" _idx="_'+j+'">
<table id="'+currentPage+'_itemGrid2" class="'+currentPage+'_itemGrid2" dsid="itemGrid2" name="itemGrid2" cellpadding="0" cellspacing="0">
<colgroup>
<col style="width:auto;">
<col style="width:172px;">
</colgroup>
<tbody>
<tr class="'+currentPage+'_itemGrid2_row_0">
<td id="'+currentPage+'_picCell2_'+j+'" name="picCell2" class="'+currentPage+'_picCell2" colspan="1" rowspan="1">
<div class="cell-wrapper"><img class="'+currentPage+'_itemImage2"src="'+image+'" id="'+currentPage+'_itemImage2" dsid="itemImage2" name="itemImage2">
</div>
</td>
<td id="'+currentPage+'_Cell2_'+j+'" name="Cell2" class="'+currentPage+'_Cell2" colspan="1" rowspan="1">
<div class="cell-wrapper">
<div name="sellerName" id="'+currentPage+'_sellerName" dsid="sellerName" data-role="appery_label" class="messagePerson '+currentPage+'_sellerName">'+sellerName+'</div>
<div name="lastMessage2" id="'+currentPage+'_lastMessage2" dsid="lastMessage2" data-role="appery_label" class="'+currentPage+'_lastMessage2">'+message+'</div>
<div name="productID2" id="'+currentPage+'_productID2" dsid="productID2" data-role="appery_label" class="'+currentPage+'_productID2">'+productID+'</div>
<div name="messageID2" id="'+currentPage+'_messageID2" dsid="messageID2" data-role="appery_label" class="'+currentPage+'_messageID2">'+messageID+'</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>');
Figured I'de put the whole in there in case of syntax..
EDIT2:
The only reason I am doing this clunky solution is because I can't append a collapsed DOM js variable.
for(var i = 0; i < this.cache[0].length; i++){
var div = Appery("chat1").clone();
div.attr("id",currentPage+"_chat1_"+i);
div.find(Appery("messageID")).text(this.cache[0][i]._id);
div.find(Appery("buyerName")).text(this.cache[0][i].user_name);
div.find(Appery("productID")).text(this.cache[0][i].productID);
Appery("allChats1").append(div);
}
I need to repeat an html snippet several times on a page but the problem is that the contained html elements have id defined that should be unique on page. So what is the proper way I could repeat this snippet without removing the id attribute from the elements ?
Could I use iframe as container for this snippet & let the duplicate ids exist on page?
You can use JavaScript to clone the snippet and at the same time change the IDs.
Example if your snippet is:
<div id="snippet">
<table id="list">
<tr id="0">
<td id="firstName0">John</td>
<td id="lastName0">Smith</td>
</tr>
<tr id="1">
<td id="firstName2">John</td>
<td id="lastName2">Doe</td>
</tr>
</table>
</div>
Using
$("#snippet").clone(false).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + "_1"); });
Will Produce
<div id="snippet_1">
<table id="list_1">
<tr id="0_1">
<td id="firstName0_1">John</td>
<td id="lastName0_1">Smith</td>
</tr>
<tr id="1_1">
<td id="firstName2_1">John</td>
<td id="lastName2_1">Doe</td>
</tr>
</table>
</div>
Which will solve the duplicate ID problem.