CODEWITHSUNDEEP
javascriptjqueryhtmlcssdatatables
radbyx
radbyx

Reputation: 9670

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

Upvotes: 3

Views: 2435

Answers (2)

radbyx
radbyx

Reputation: 9670

It can also be done with:

text-overflow: ellipsis; 
white-space: nowrap;

See Datatables doc

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46589

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.

Upvotes: 1

Related Questions