I want to make each row of a table clickable in Angular 2. However, only the parts of the cell that contain data are clickable. i.e. if one cell contains more data than another, and so has a greater height, the empty bit of the smaller cell is not clickable.
For example, in the page below the first cell is only clickable on the line containing the name, whereas the entirety of the second cell is clickable
<table>
<thead></thead>
<tbody>
<tr *ngFor="let item of items" routerLink="/otherpage/{{item.Id}}">
<td>{{item.name}}</td>
<td>
<ul>
<li *ngFor="let detail of item.details">
{{detail}}
</li>
</ul>
</td>
</tr>
</tbody>
</table>
I've fixed the routerLink code for you.
<table>
<thead></thead>
<tbody>
<tr class="clickable" *ngFor="let item of items" [routerLink]="['/otherpage/', item.Id]">
<td>{{item.name}}</td>
<td>
<ul>
<li *ngFor="let detail of item.details">
{{detail}}
</li>
</ul>
</td>
</tr>
</tbody>
</table>
You need to add CSS for the animation.
clickable {
cursor: pointer;
}
This will make the entire <tr></tr> clickable with the cursor animation
set the padding for the <tr> to 0. this way the <td> elements would fill the rows, hence making the whole cell clickable.
note that depending on your css file this might be a bit more difficult. but the solution is basically to make your data cover your rows.
Related
I have a table and I'm iterating in a over an array. In some scenarios, I'll want to add an extra <tr>. I'm looking for something like this:
<table>
<tr *ngFor="let element in array">
<td>
some content
</td>
//Starting block that will only be activated if some variable is true
</tr>
<tr>
<td>
some extra content
</td>
//End of the block that will only be activated if some variable is true
</tr>
</table>
Is there a way to create a boulder html that can wrap it like this?
The options I've tried so far are changing the data structure (array) so it include the element I'm looking for but I'm not pleased with having extra data there just for displaying purpose.
This should do what you want
<table>
<ng-container *ngFor="let element in array"
<tr>
<td>
some content
</td>
</tr>
<tr *ngIf="someVar">
<td>
some extra content
</td>
</tr>
</ng-container>
</table>
Perhaps the best option is to work with ng-repeat.
Example with ng-repeat:
<table ng-controller="myCtrl">
<tr ng-repeat="x in records">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
Ng-repeat makes a for in your object or array.
See if this can help you.
I have 3 buttons in a popup form. I want to align first button at the top and other two together at the second line/row. I have implemented the below method and failed where top button is top but not wrap the content and two buttons at the bottom mesh together. How i can manipulate the buttons?
This is my html:
<div>
<table>
<tr><td colspan="2">Btn1</td></tr>
<tr>
<td>Btn2</td>
<td>Btn3</td>
</tr>
</table>
</div>
How they look like:
Thank you.
The main problem you're having here is that you are trying to apply styles from the #acc_popup CSS selector to multiple elements on the same page.
id tags need to be unique in the DOM structure, and multiple occurrences of them will cause your styles or scripts to apply only to the first occurrence of the id.
Swap the id for a class.
In the HTML:
<td>Btn</td>
In the CSS:
.acc_popup {
//styles go here
}
Edit:
Now since you've informed us you're not doing this with css. This should do what you want.
Wrap the first button in a <td> and add colspan=2 to that element. If it isn't blatantly clear, this makes the table cell span 2 columns instead of the default 1.
<div>
<table>
<tr>
<td colspan="2">Btn1</td>
</tr>
<tr>
<td>Btn2</td>
<td>Btn3</td>
</tr>
</table>
</div>
I'm trying to use the collapse functionality in Twitter Bootstrap in order to display an additional line in a table with a single cell taking the whole width of the table... The line is displayed when a button in the above line is clicked.
The problem is : without the collapse functionality, with the colspan attribute, the "extra line" has the good width, but with the functionality in action, the colspan attribute doesn't seem take effect, the line stays of the width of the first cell of the line above.
<table>
<thead>
<tr>
<th></th>
<th>content</th>
<th>content</th>
<th>content</th>
<th>content</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button data-toggle="collapse" data-target="#collapsible">Develop</button>
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr id="collapsible" class="collapse">
<td colspan="5">
Collapsible content
</td>
</tr>
</tbody>
</table>
What is the problem and how to solve it ?
None of the other solutions on this page worked for me, but
I found the answer here: https://stackoverflow.com/a/21939080/2378910
(I don't want to take credit so upvote that one instead!)
It says:
To collapse a table row, you should write extra css for the collapsed
row:
table .collapse.in {
display: table-row !important;
}
It will fix the display issue after the row expanded.
I solved this issue by putting a div in the cell that I want to collapse and attached the class collapsible to it.
I don't understand why my column won't span to the top and bottom rows I created. It is supposed to look like the "Today" column is taller on the top and bottom then the other columns.
It's a lot of code, and I wasn't sure what I should cut without deforming it all or adding a new variable (it needs a fluid height).
JSFiddle: http://jsfiddle.net/DaAwesomeP/aU9Le/
Basic HTML Layout:
<table id="weatherForecast">
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="3">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
</table>
Here is an image that shows what I want:
The table markup violates the HTML table model rules, as the W3C HTML Validator tells you if you use it in HTML5 mode.
Since there are two cells on the second row, the first row should occupy two columns, too, so set colspan=2 on its td element.
And you cannot use rowspan=3, since there aren’t just enough rows in the table to span. Use rowspan=2 instead.
It’s difficult to tell what you actually want (a drawing would have helped), but the following would at least be valid HTML (note that I fixed a problem with duplicate id values too):
<table id="weatherForecast" border>
<tr class="weatherForecast-row-outer">
<td colspan=2></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="2">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE2" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
I got rid of the all of the rowspan and just gave one cell display: block. I can then adjust the height of that cell specifically without changing the others. I used calc to provide a variable height.
I'm trying to recreate a table with divs. I want to be able to put elements between the rows so that when a user clicks on a specific row, a description of the data in the row can appear between the rows.
I need the columns to align even if there are elements between the rows. I also need the "cells" to word wrap or push the boundaries similar to tables. The table that I am trying to recreate is 100% width and the page also has expanding widths. I can make the table be a set width, but I'm supporting several screen sizes so keeping the 100% would be best
Thanks for any help!
EDIT:
Here is what I ended up doing (MVC With Razor):
<table style="width: 100%">
<tr>
<th>
Data1
</th>
<th>
Data2
</th>
<th>
Data3
</th>
<th>
Data4
</th>
<th>
Data5
</th>
<th>
Data6
</th>
</tr>
#foreach (var item in Model)
{
<tr id="#item[0]">
<td>
<span style="padding-left: 5px">+</span> <span style="padding-left: 15px">#item[0]</span>
</td>
<td>
#item[1]
</td>
<td>
#item[2]
</td>
<td>
#item[3]
</td>
<td>
#item[4]
</td>
<td>
#item[5]
</td>
</tr>
<tr id="Expander#item[5]" style="display: none">
<td colspan="6">
</td>
</tr>
}
</table>
Then I just did some jquery to control all of the expanding/contracting
Worked great!
If you have tabular data stick to tables. For what you want to do take a look at the colspan attribute. It enables a table cell to span over multiple columns (even all of them).
For maximum width, set width:100% on the table.
Good luck,
Alin