Bootstrap Responsive unnecessary scroll bar

bkates

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">

bkates

Bump. Just wondering if anyone else has had any issues with Datatables 1.10 and Bootstrap responsive?

benjaminbaldoni

I believe I had to add the following css when upgrading to bootstrap 3.3.x, but I'm not sure if you are facing the same issue.

.table-responsive { overflow-x: initial; }

bkates

Thanks. Your solution "works", however it breaks the Bootstrap responsive feature by never showing a scroll bar.

Any thoughts on how I can keep the Bootstrap responsive feature AND use DataTables?

allan

Can anyone link to a test case showing the issue - also if you haven't tried 1.10.9, could you try that - there have been a few improvements in the width handling.

Allan

bkates

Sure thing. I'll see what I cook up.

BTW, I upgraded to 1.10.9:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs/dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,cr-1.2.0,fc-3.1.0,fh-3.0.0,kt-2.0.0,r-1.0.7,rr-1.0.0,sc-1.3.0,se-1.0.1/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/r/bs/dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,cr-1.2.0,fc-3.1.0,fh-3.0.0,kt-2.0.0,r-1.0.7,rr-1.0.0,sc-1.3.0,se-1.0.1/datatables.min.js"></script>

Same issue, hence I'm using Bootstrap 3.2:

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

bkates

Here are two JSFiddles:

1) Using Bootstrap 3.2.0: https://jsfiddle.net/bkates/vwu4711L/

Note in the DataTables there is no scroll bar at the bottom. The scroll bar only appears when you resize the page (i.e. proper responsive behaviour).

2) Using Bootstrap 3.3.5: https://jsfiddle.net/bkates/vof1njuz/5/

Notice the scroll bar at the bottom.

As per the comment above, I can remove it by setting the x-overflow to initial, however that makes the table non-responsive.

As per my original post:

When DataTables renders the table, it adds:

<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.

JokerDan

I had an issue with this, I solved it by removing the bootstrap responsive and setting the following on init of datatables;

"scrollX": true,

Although it bugs me the the scrolling isn't as smooth as bootstrap default.

Another fix is to have a custom CSS overwrite with the following;

@media only screen and (min-width: 768px) { 
  .table-responsive {
    overflow-x: hidden;
  }
}

bkates

Thanks for the comment. I'm hoping Allan can work his magic and we do not need to resort to disabling Bootstrap.

JokerDan

For now then, set a media query up of

@media only screen and (min-width: 768px) {
.table-responsive {
overflow-x: hidden;
}
}

in a .css file that loads after bootstrap.

-- Then set "scrollX" to false.

bkates

Good suggestion. Thanks!

allan

Thanks for the test case. I'll take a look when I get back next week.

Allan

danielbsnake72

If I understood your problem correctly, this should work:

$('#usersTable').DataTable({
    "drawCallback": function( settings ) {
        $("#usersTable").wrap( "<div class='table-responsive'></div>" );
    }
});

See result: https://jsfiddle.net/wxewhc5p/

bkates

The table is already wrapped with a reponsive div. I'm curious what adding another one would do?

danielbsnake72

Remove the responsive div as I did in the result fiddle.

You really should check it: https://jsfiddle.net/wxewhc5p/

By your usage, the responsive div wraps around the table before it is redrawn by DataTables.
On the other hand, by this solution, the responsive div only wraps around the table after DataTables has drawn it.

bkates

Neat! The fiddle looks good on my phone.

danielbsnake72

Glad it helped :)

bkates

Implemented the workaround in my project and it worked. I can finally upgrade to Bootstrap 3.3.5. Thanks!

bkates

Just wanted to bump this. Allan: do you have a more permanent solution?

allan

I've just committed a fix and it is included in the nightly builds now.

Regards,
Allan

danielbsnake72

A small fix to the workaround so as to avoid wrapping a table-responsive div around the datatable on every redrawing.

$('#usersTable').DataTable({
    "drawCallback": function( settings ) {
     if(!$("#usersTable").parent().hasClass("table-responsive")){
      $("#usersTable").wrap("<div class='table-responsive'></div>");
     }
    }
});

Now the wrapping only occurs once.

You can check the results on https://jsfiddle.net/wxewhc5p/1/

bkates

I tried upgrading to Datatables 1.10.10, however I'm still seeing some incorrect formatting when I wrap my tables in a

<

div class='table-responsive'>. It seems that a few extra pixels are added to each table and then a horizontal scroll bar appears.

allan

@bkates - Could you give a link to a test case?

Having said that, I haven't tested Bootstrap's own responsive tables much, with focus being on the Responsive extensions for DataTables instead.

Allan

bkates

@allan: I tried and tried to give you a test case on jsfiddle, but alas no luck. It still wasn't working in my application, however. The main difference between my app and the test was the data source. My app uses ajax sourced data whereas the the testcase used DOM sourced data. I don't know if that makes any difference....

For some reason, the table width in my application was 4 px wider than my Bootstrap container. I could figure out why. Long story short, I added width: 100% to the table and it works.

allan

Good to hear you got it sorted out.

If anyone else is reading this and encounters the same issue, could you post a test case so I can look into it.

Thanks,
Allan

pratapkuyate

After adding class "col-sm-12 table-responsive" for div, sorted out the issue for me.