Quantcast
Channel: DataTables 1.10 — DataTables forums
Viewing all articles
Browse latest Browse all 2364

Bootstrap Responsive unnecessary scroll bar

$
0
0

I have a table surrounded by table-responsive class, e.g.

<div class="table-responsive">
<table id="usersTable" class="table table-striped table-bordered table-hover" data-page-length='10'>
....

This produces an unnecessary scroll bar at the bottom of the page.

If I hard code the data (DOM sourced) and remove the DataTable initialization (in this case, by removing the ID), the scroll bar goes away, e.g.:

<table class="table table-striped table-bordered table-hover" data-page-length='10'>
    <thead>
    <tr>
        <th>User Name</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Enabled</th>
        <th>Job Title</th>
        <th>Email</th>
        <th>Phone #</th>
        <th>Admin</th>
        <th></th>
    </tr>
    </thead>
            
    <tbody>
        <tr role="row" class="even">
       <td>user name</td>
       <td>First</td>
       <td>Last</td>
       <td>Yes</td>
       <td></td>
       <td>email@emaila</td>
       <td></td>
       <td>No</td>
       <td>Edit</td>
    </tr>
    </tbody>
</table>

When DataTables renders the table, it add:

<div id="usersTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
    <div class="row">

class="row" adds a left and right margin. If in the debugger, I remove the right margin, the scroll bar goes away, but the page is slightly incorrectly formatted.

Note: I was using Bootstrap 3.2.x and everything worked fine. I recently upgraded to 3.3.5 and that's when things broke.

I am importing Datatables with:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs/dt-1.10.8,fh-3.0.0,kt-2.0.0,r-1.0.7,sc-1.3.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs/dt-1.10.8,fh-3.0.0,kt-2.0.0,r-1.0.7,sc-1.3.0/datatables.min.js"></script>

And Bootstrap with:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Viewing all articles
Browse latest Browse all 2364

Trending Articles