datatables does not becomes responsive on bootstrap3 modal dialog

Question

I am using datatables plugin for my table, please note that I am using responsive datatables. Also I am using bootstrap v3.2.0. I have put-up my responsive datatables on bootstrap modals dialog. But problem, I am facing is that my table is not becoming responsive on modal dialog, it becomes responsive on normal page though. I have found if i remove the class name "modal" from modal code then it becomes responsive so it is clear that class modal is creating problem but i can not remove modal class as well otherwise modal won't work.

Here is css of modal class:

.modal {
    bottom: 0;
    display: none;
    left: 0;
    outline: 0 none;
    overflow-x: auto;
    overflow-y: scroll;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1050;
}

My Modal code:

    <div class=" fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
        <h4 class="modal-title" id="myModalLabel">Send File Popup</h4>
      </div>
      <div class="modal-body">    
         <table id="filepopupTable" class="display responsive nowrap" cellspacing="0" width="100%">
                    <thead>
                 <tr>
                 <th class="padding10">  <div class="ckbox ckbox-default">
            <input type="checkbox" id="selectall" value="1" class="mt0 mr10" />
            <label for="selectall" class="mr5">Select All</label>
          </div></th>
                    <th>File Name</th>
                    <th>Size</th>
                     <th>Uploaded On</th>
                    <th data-sort-ignore="true">Quick Action</th>

                 </tr>
              </thead>
              <tbody>
                 <tr class="odd gradeX">
                  <td class="thmb">
                                    <div class="ckbox ckbox-default">
                  <input type="checkbox" id="check1" value="1" />
                  <label for="check1"></label>
                </div>
                                  </td>
                    <td>Life brochure.doc</td>
                    <td>3 kb</td>
                     <td> Jan 03, 2014</td>
                    <td class="table-action">
                   <a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
                </td>
                 </tr>
                 <tr class="even gradeC">
                  <td class="thmb">
                                   <div class="ckbox ckbox-default">
                  <input type="checkbox" id="check2" value="1" />
                  <label for="check2"></label>
                </div>
                                  </td>
                      <td>Provider_list.xlxs</td>
                    <td>34 kb</td>
                     <td> Jan 03, 2014</td>
                    <td class="table-action">
                   <a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
                </td>
                 </tr>
                 <tr class="odd gradeA">
                  <td class="thmb">
                                   <div class="ckbox ckbox-default">
                  <input type="checkbox" id="check3" value="1" />
                  <label for="check3"></label>
                </div>
                                  </td>
                    <td>My_logo.png</td>
                    <td>443 kb</td>
                     <td> Jan 03, 2014</td>
                    <td class="table-action">
                   <a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
                </td>
                 </tr>
               </tbody>

                </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
      </div>
    </div>
  </div>
</div>

Please everyone, check this issue and try to fix it.

Help is much appreciated!!

Answer 1

Its not so much that the modal class is causing the issue as it is the fact that the modal class hides its contents by default.

The Responsive DataTables extension will not run on a table that is hidden during initialization.

To work around this issue after you show the modal recalculate the column widths. First the table:

var myTable = $("#myTable").DataTable({});

Then later showing when you show the modal

$("#myModal").modal('show');
myTable.responsive.recalc();

More information can be found here: http://datatables.net/extensions/responsive/reference/api/responsive.recalc%28%29