Bootstrap Responsive unnecessary scroll bar

Bootstrap Responsive unnecessary scroll bar

bkatesbkates Posts: 35Questions: 5Answers: 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">

This question has an accepted answers - jump to answer

Answers

  • bkatesbkates Posts: 35Questions: 5Answers: 0

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

  • benjaminbaldonibenjaminbaldoni Posts: 11Questions: 3Answers: 1

    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; }

  • bkatesbkates Posts: 35Questions: 5Answers: 0

    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?

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • bkatesbkates Posts: 35Questions: 5Answers: 0

    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">
    
  • bkatesbkates Posts: 35Questions: 5Answers: 0

    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.

  • JokerDanJokerDan Posts: 4Questions: 0Answers: 0
    edited September 2015

    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;
      }
    }
    
  • bkatesbkates Posts: 35Questions: 5Answers: 0

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

  • JokerDanJokerDan Posts: 4Questions: 0Answers: 0

    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.

  • bkatesbkates Posts: 35Questions: 5Answers: 0

    Good suggestion. Thanks!

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    edited September 2015

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

    Allan

  • danielbsnake72danielbsnake72 Posts: 4Questions: 0Answers: 1

    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/

  • bkatesbkates Posts: 35Questions: 5Answers: 0

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

  • danielbsnake72danielbsnake72 Posts: 4Questions: 0Answers: 1
    edited September 2015 Answer ✓

    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.

  • bkatesbkates Posts: 35Questions: 5Answers: 0

    Neat! The fiddle looks good on my phone.

  • danielbsnake72danielbsnake72 Posts: 4Questions: 0Answers: 1

    Glad it helped :)

  • bkatesbkates Posts: 35Questions: 5Answers: 0

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

  • bkatesbkates Posts: 35Questions: 5Answers: 0

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

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

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

    Regards,
    Allan

  • danielbsnake72danielbsnake72 Posts: 4Questions: 0Answers: 1
    edited October 2015

    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/

  • bkatesbkates Posts: 35Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    @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

  • bkatesbkates Posts: 35Questions: 5Answers: 0

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

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • pratapkuyatepratapkuyate Posts: 1Questions: 0Answers: 0
    edited February 2016

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

This discussion has been closed.