radbyx radbyx - 29 days ago 18
CSS Question

Datatable row is cutted in half when there is only one row in the table

I am using datatables's Scroller extension.

When the table have more than 1 row, the rows are displayed fine. But if the table only contains of 1 row, the "lower part" of the row isn't displayed. The table cut the row of almost in the middle.

Im trying to make a second line inside the row, using the

div
as you can see in my example. It's like the table can figure out to include it in it's height calculation if there is more than 1 row, but not if there is only 1 row. Does anyone know what I can do about it?

Focus should be here I think:
<div>second line</div>



html:


<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<script src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="http://datatables.net/release-datatables/extensions/Scroller/js/dataTables.scroller.js"></script>

<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>

</tr>
</thead>

<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>





Javascript:


$(document).ready( function () {
var table = $('#example').DataTable({
deferRender: false, // TODO learn from doc
dom: 'f<"table-toolbar">tS',
language: {
"search": '<i class="fa fa-search"></i>'
},
stateSave: false,
//scrollY: $(document).height() - 266,
scrollY: true,
scrollCollapse: true,
columns: [
{
"className": '',
"orderable": false,
"sortable": false,
"data": null,
"defaultContent": "first line<div>second line</div>"
}
]
});
} );



Update 1 : Fiddle where it breaks


Fiddle where the rows dowsn't work


Update 2 : Fiddle where it works. (2 rows instead of 1 - notthing else!)


Fiddle where the rows works

Answer

The display problem is caused by the surrounding div (.dataTables_scrollBody) that causes the data to be cut off. It comes out as 37px for a one row table and 112px for a two row one. 37px is obviously not enough, so as a workaround you can put .dataTables_scrollBody {min-height:55px} in the CSS. That will solve the display problem. See http://live.datatables.net/ceqijesi/12/edit

To solve the actual issue however, you should dive into the JavaScript that creates the table. Or, more precisely, the div that comes after the table. It has no class, only a style attribute that defines its height. (The table itself is positioned absolutely, so it's this next div that determines the height of .dataTables_scrollBody.)
To confuse matters, this div has different heights in different browsers here.