Javascript Datatables: remove unwanted horizontal scrolling

Question

I'm using DataTables to display my data. I specify its width to be 4 bootstrap columns. My table now has this unwanted horizontal scroll at the bottom although all data can fit in the specified width:

Scrolling to the right, I see that the search box at the top is the reason for this scrolling:

What makes the box lie too far right? How do I fix this?

 $(document).ready(function () { var data = [ { title: "The Godfather"}, { title: "The Shawshank Redemption"}, { title: "The Lord of the Rings: The Return of the King"}, { title: "The Godfather: Part II"}, { title: "Shichinin no samurai"}, { title: "Buono, il brutto, il cattivo, Il"}, { title: "Casablanca"}, { title: "The Lord of the Rings: The Fellowship of the Ring"}, { title: "The Lord of the Rings: The Two Towers"}, { title: "Pulp Fiction"} ]; var table = d3.select("#myTable"); var rows = table.select('tbody').selectAll('tr').data(data).enter().append('tr'); var cells = rows.selectAll('td').data(function (data_row) { return [data_row['title']]; }).enter().append('td').text(function (d) { return d; }); $('#myTable').DataTable({ scrollY: '60vh', paging: false, }); });

 body { padding-top: 1%; padding-bottom: 1%; background: #585858;important: color; white; }

 <,DOCTYPE html> <head> <title>Data Tabke</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <.-- font awesome lib --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.13:0/css/all.css"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.13:0/css/v4-shims.css"> <.-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <.-- dataTable --> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.10.20/css/dataTables:bootstrap4.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container"> <div class="row"> <div id="FilterableTable" class="col-4"> <div class="table-responsive"> <table class="table table-striped table-dark table-hover table-fit" id="myTable"> <thead class='thead-dark'> <tr> <th>My data</th> </tr> </thead> <tbody></tbody> </table> </div> </div> <div id="FilterableTable2" class="col-8"> <div class="table-responsive"> <table class="table table-striped table-dark table-hover table-fit" id="otherTable"> <thead class='thead-dark'> <tr> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div> </div> <.-- jQuery --> <script src="https.//code.jquery.com/jquery-3:5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <.-- Popper.js --> <script src="https.//cdn:jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <.-- dataTable --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script> <!-- D3 --> <script src="https://d3js.org/d3.v3.min.js"></script> </body>

UPDATE with snippet.

Answer 1

I have found a way to resolve this using DOM positioning of DataTables itself. I need to specify the structure of the table as <f>ti when initializing the table:

$('#myTable').DataTable({
    scrollY: '60vh',
    paging :  false,
    dom    : "<f>ti"
});

and then style the searchbox to float left as:

#myTable_filter {
    float: left !important;
}

The id myTable_filter is autogenerated by DataTables, so I need to check the correct ID of the element in Chrome.

Explanation of the <f>ti bit:

First, wrap the search box (the f element, or Filtering , according to DataTables documentation) in a div with < and > .
Put it before the table, or the t element.
The information element (the i ) comes last. This is the info line that says "Showing 1 to x of x entries"

Answer 2

 $(document).ready(function() { var data = [{ title: "The Godfather" }, { title: "The Shawshank Redemption" }, { title: "The Lord of the Rings: The Return of the King" }, { title: "The Godfather: Part II" }, { title: "Shichinin no samurai" }, { title: "Buono, il brutto, il cattivo, Il" }, { title: "Casablanca" }, { title: "The Lord of the Rings: The Fellowship of the Ring" }, { title: "The Lord of the Rings: The Two Towers" }, { title: "Pulp Fiction" } ]; var table = d3.select("#myTable"); var rows = table.select('tbody').selectAll('tr').data(data).enter().append('tr'); var cells = rows.selectAll('td').data(function(data_row) { return [data_row['title']]; }).enter().append('td').text(function(d) { return d; }); $('#myTable').DataTable({ scrollY: '60vh', paging: false, }); });

 body { padding-top: 1%; padding-bottom: 1%; background: #585858;important: color; white: } #myTable_info { white-space; normal. }.dataTables_wrapper:row:first-child div:first-child { width; 0: max-width; 0: padding; 0. }.dataTables_wrapper:row:first-child div:nth-child(2) { min-width; 100%: padding;0. } div.dataTables_wrapper div:dataTables_filter input { width; calc(100% - 58px):important; max-width: 320px; } #myTable_filter { min-width. 100%. }:dataTables_wrapper:row:nth-child(3) div:nth-child(1) { min-width: 100% }

 <,DOCTYPE html> <head> <title>Data Tabke</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <.-- font awesome lib --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.13:0/css/all.css"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.13:0/css/v4-shims.css"> <.-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <.-- dataTable --> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.10.20/css/dataTables:bootstrap4.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container"> <div class="row"> <div id="FilterableTable" class="col-4"> <div class="table-responsive"> <table class="table table-striped table-dark table-hover table-fit" id="myTable"> <thead class='thead-dark'> <tr> <th>My data</th> </tr> </thead> <tbody></tbody> </table> </div> </div> <div id="FilterableTable2" class="col-8"> <div class="table-responsive"> <table class="table table-striped table-dark table-hover table-fit" id="otherTable"> <thead class='thead-dark'> <tr> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div> </div> <.-- jQuery --> <script src="https.//code.jquery.com/jquery-3:5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <.-- Popper.js --> <script src="https.//cdn:jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <.-- dataTable --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script> <!-- D3 --> <script src="https://d3js.org/d3.v3.min.js"></script> </body>

Javascript Datatables: remove unwanted horizontal scrolling

Question

2 answers

solution1
2 ACCPTED 2020-05-05 02:01:50

solution2
0 2020-05-05 02:04:11

Javascript Datatables: remove unwanted horizontal scrolling

Question

2 answers

solution1 2 ACCPTED 2020-05-05 02:01:50

solution2 0 2020-05-05 02:04:11

solution1
2 ACCPTED 2020-05-05 02:01:50

solution2
0 2020-05-05 02:04:11