row.child Css Issue
row.child Css Issue
iggyweb
Posts: 9Questions: 3Answers: 0
For some reason when using child rows, the CSS for the parent row is not passed to the child row.
From what I can see, the row.child creates a td with a colspan, so if I had 13 columns in the parent row the td has a colspan of 13. So if I use the class table table-striped table-bordered to style the main datatable, the parent row has the correct styling yet the child does not.
Due to each td having a padding of 8px the introduced td with colspan introduces 8px around the HTML within the child row, borders are removed and alignment is immediately thrown out, so if I have the same 13 columns structure in the child row, columns no longer align.
Any thoughts?
Please see my sample below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="content">
<div class="container">
<div class="col-lg-12">
<table class="table table-striped table-bordered" id="Archive">
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Forename</th>
<th>Surname</th>
<th>Date</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tr>
<td class="icons"><i class="fi-list btnArchiveHistory" style="cursor: pointer; font-size: 26px;"></i></td>
<td>2</td>
<td>Sam</td>
<td>Smith</td>
<td>19/08/2019</td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
var table = $("#Archive").DataTable({
"responsive": true,
"paging": "full",
"deferRender": true,
"iDisplayLength": 10,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columnDefs": [{ type: "date-euro", targets: 3 }],
"aoColumns": [
{ "bSortable": false, "bSearchable": false },
{ "bSortable": true, "bSearchable": true },
{ "bSortable": true, "bSearchable": true },
{ "bSortable": true, "bSearchable": true },
{ "bSortable": true, "bSearchable": true },
{ "bSortable": false, "bSearchable": false },
{ "bSortable": false, "bSearchable": false },
{ "bSortable": false, "bSearchable": false },
{ "bSortable": false, "bSearchable": false },
{ "bSortable": false, "bSearchable": false },
{ "bSortable": false, "bSearchable": false },
{ "bSortable": false, "bSearchable": false },
{ "bSortable": false, "bSearchable": false }
],
"order": [[1, "desc"]]
});
$("#Archive").on("click", ".btnArchiveHistory", function () {
var thisClass = $(this).attr("class");
if (thisClass.indexOf("fi-minus") >= 0) {
$(this).removeClass("fi-minus");
$(this).addClass("fi-list");
} else {
$(this).removeClass("fi-list");
$(this).addClass("fi-minus");
}
var tr = $(this).closest("tr");
var row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass("shown");
} else {
$.get("/ArchiveHistory?id=" + $(this).attr("rel"), function (html) {
row.child(html).show();
tr.addClass("shown");
});
}
});
});
</script>
Child Row HTML sample provided by ArchiveHistory
<tr>
<td class="icons"></td>
<td>1</td>
<td>Postman</td>
<td>Pat</td>
<td>18/08/2019</td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
</tr>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
<td class="icons"></td>
</tr>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
Answers
Hi @iggyweb ,
This example here came from this thread, and will hopefully help.
If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi Colin, I can't believe one small tweak solved it:
//row.child(html).show();
row.child($(html).toArray()).show();
It works perfectly thank you :-)
Hi Colin, noticed a small issue when child rows contain more than 1 row, an extra [object text] containing \n was added between each HTMLTableRowElement, which resulted in an extra tr being added with a td colspan of 13, which therefore introduced the padding issue. I have tweaked the code below to address the issue:
row.child(format(html)).show();Thank you again for your help :-)