Does ng-hide hide the contained DOM elements? - html

I have the following snippet:
<p>AAA</p>
<div ng-show="files.length == 0">
<p>BBB</p>
<tr class="no-files">
<p>CCC</p>
<td colspan="2">
<p class="no-files">There are no files to load.</p>
</td>
</tr>
</div>
It seems like the ng-show is only marking its own div as (in)visible, and not also the contents of that div. In my application, the "there are no files..." message is displayed regardless of the number of elements in files. I expected entire div to be shown/hidden. Have I done something wrong or is this how ng-show works?
In the example above, when the number of files is greater than zero, AAA and CCC are displayed.
Is this the proper behavior or have I done something wrong?

Firstly, I'd say you have invalid HTML. <div>s can't contain table rows. Try removing the wrapper <div> and putting ng-show on the <tr>.

p can't appear in a table outside of a table cell. Neither can div. Use ng-show on the tr element(s) instead.
<tr class="no-files" ng-show="files.length == 0">
<td colspan="2">
<p class="no-files">There are no files to load.</p>
</td>
</tr>

Related

Xpath of a table cell based on the other cell in the same row

This is the html code I got:
<tr class="">
<td>
Go to Google
</td>
<td>02/10/20, 09:24 AM</td>
<td><button type="button" class="delete"></td>
</tr>
As you can see, the <tr> has three <td>s. Now, we are talking about a table, so we can assume that I have 100 of these <tr>s, with different values, but with the same structure. I would like to get the xpath of the third td (the button), using the value of <a> ('Go to Google'). How can I do that? I know I need to something like:
(//td//parent::a)
but evidently am not smart enough for that.
So you want to find the td element that has a child a with the text “Go to Google”, and then from this td find the next td that has a button element child.
In XPath this could look like this:
//td[a[text()="Go to Google"]]/following-sibling::td[button]

I want to dynamically allocate css tags in my HTML. I'm also using Angular 5 and Bootstrap 3.3.7

I am creating a table from data brought in as a JSON. This could be tonnes of data so I have a loop making all the rows in the table. I want to be able to click on a row and have that row expand showing the 2nd row with the list.extraInfo beneath it. Code looks like this:
<tbody *ngFor= " let list of lists, let i = index ">
<tr data-toggle="collapse" data-target="#{{i}}" class="clickable">
<td > something </td>
<td >{{i+1}}</td>
<td >{{list.name}}</td>
</tr>
<tr >
<td colspan="3">
<div id="{{i}}" class="collapse">
{{list.extraInfo}}
</div>
</td>
</tr>
</tbody>
I'm well aware that having data-target="#{{i}}" and id="{{i}}" doesn't work, but I cannot find anywhere what it is I need to put there to get every row of the table to have a separate and distinct id number so that the collapse feature works on the row that you click on.
As it stands it opens the extraInfo row for the 1st row regardless of which row I click on.
Curly brace syntax ({{ }}), also called interpolation, is meant for inner HTML. That is why {{i+1}} works in your td but not in your tr tag. To use a variable in a <tr> attribute, you don't need to wrap it in curly braces.
Secondly, the Can't bind to 'target' since it isn't a known property of 'tr'. error suggests that you need to use an attribute input binding instead:
<tr data-toggle="collapse" [attr.data-target]="'#'+ i" class="clickable">

Change particular div class in kendo grid row template

I am running one project where i am using kendo grid row template.
Below is my html grid code:
table id="grid" style="width:100%">
<colgroup>
<col class="photo" />
<col class="details" />
<col />
</colgroup>
<thead style="display:none">
<tr>
<th>
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td style="width:30%">
div class="row">
<div id="dvImage" class="col-sm-4" style="width:118px">
#= imagelink #
</div>
<div class="col-sm-8" style="width:400px">
<span class="name" style="font-size:14px; color:green">#: Link #</span>
</div>
</div>
</td>
</tr>
</script>
In the above script for div class name "dvImage" for sometimes data is not present so it's still contain those space.
I googled many things and got to know that if we can find this div class in onDataBound event then i can check if this div don't have data then can hide this div for particular row. but when i tried this only for first row i am able to hide the data for other rows still it was containing space.
All suggestions are welcome.
If I understand your requirements correctly if the image doesn't exist then you want the rest of the row details to take up the rest of the space? If this is not correct the please correct me.
Assuming this is the case then you can actually change your template like this:
Before
<div id="dvImage" class="col-sm-4" style="width:118px">
#= imagelink #
</div>
After
#if(data.imagelink === null || data.imagelink === ""){#
<div class="col-sm-12" style="width:518px">
#} else {#
<div id="dvImage" class="col-sm-4" style="width:118px">
#= imagelink #
</div>
<div class="col-sm-8" style="width:400px">
#}#
I have put together a demo for you to look at here: http://dojo.telerik.com/eMiMa/2
(in the demo I have told the grid to hide the photo for every even row and expand the details grid to take up two columns rather than 1 column)
What this change simply does is look at your template and checks to see if the imagelink value is valid and if it isn't then it simply expands the detail div for you to take up the maximum space. If the image does exist then it processes the template as normal.
In order to keep the dimensions the same the opening div for your next section is contained within the conditional formatting so that it applies the correct spacing for you.
If the requirement is to just hide the entire row then you can move this conditional check to the top of the template and hide the entire row. If this is the desired outcome then I can update the answer to reflect this.

Prevent div wrapper on tr from being ejected

Given the following HTML:
<table>
<div>
<tr><td></td></tr>
</div>
</table>
When it is rendered, the div gets moved out like so:
<div>
</div>
<table>
<tr><td></td></tr>
</table>
Why does this happen, and how can I prevent this from happening?
You can't, the first example is invalid html. You can use a <tbody> instead of the <div> however.
A <div> element is not allowed directly within a <table> element. Only table related elements are allowed (<tr> <thead>...).
There's no way to "make this work". Read the HTML specification and form a valid document.
div tag cannot be inside the table like this.
<table>
<div>
<tr><td></tr></td>
</div>
</table>
You can put it inside the td like this.
<table>
<tr><td><div></div></td></tr>
</table>

Form tag won't enclose elements inside a table

I've run into a curious problem; I've got a form inside a <tr>, however the form refuses to wrap any tags inside it. I've made a quick JSFiddle here to play around with. Firebug reports that the form isn't wrapping anything:
The <form> element is greyed out and not wrapping anything. The HTML for this test is below
<table>
<form>
<tr>
<td>Input</td>
<td>Another input</td>
</tr>
<tr>
<td colspan="4"><span>Other stuff</span></td>
</tr>
</form>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
</table>
As can be seen, the form holds two trs in the written markup. I read here that this is invalid, so my question is can I create a form that holds two or more trs and an arbitrary amount of other elements inside a table? The table has other rows in it not associated with the form, so putting a <form> round the entire table is unhelpful, although seeing as the other rows won't have any inputs for the form (POST request), I suppose a form could be put around the entire table.
Which is a better solution; whole-table wrap, or a working fix for just enclosing the needed rows in a form tag? I know I could put a table inside a td > form, but then the column widths wouldn't be the same in the nested table, which is why I came to ask this question.
You cannot interrupt the <table> structure with any tags besides <thead>, <tfoot>, <tbody>, <tr>, <th>, or <td>. You form tags need to be encapsulated between two <td> or your entire <table> needs to be placed within the <form> tag.
<table>
<tr>
<td>
<form>
...form data...
</form>
</td>
</tr>
</table>
..or..
<form>
<table>
...
</table>
</form>
you can only put a form inside a td basically, so you could put those 2 rows inside a new table that you create inside a td
like ...
<table><tr><td><form><table><tr>...</tr><tr>...</tr></table></form></td></tr><tr>...</tr><tr>...</tr></table>
The <form> tag can only be placed inside a <td> element or outside the <table> in this case.
If I were you, I'd just put the <form> around the whole table since you said there won't be any other forms within it.
Or, you could replace the <table> completely with <div>s instead that use display: table; or display: table-cell;.