jQuery dataTable overflows in bootstrap modal

Question

I have a table inside a bootstrap modal. The content that I populate inside the dataTable cells is quite large, and instead of wrapping the text to fit the table inside the modal, it overflows the modal, like it is unable to pick up the modal width and wrap the text.

Screenshot:

I have tried various solutions, such as specifying wrap CSS as well as specifying the table width (in % and px) and setting the width property on the table (in % and px) but there is absolutely no change to the table. Any advice on how to correct this issue would be greatly appreciated.

Code Extract 1 (Modal):

<!-- List Questions Modal -->
<div class="modal fade" id="questionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 95%">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4>Questions</h4>
        </div>
        <div class="modal-body">
            <div class="row">
            <div class="responsive-table">
                <table width="900px" class="table table-bordered" style="margin-bottom:2em; width: 900px;" id="questionsTable">
                    <thead>
                        <tr>
                            <th >Code</th>
                            <th>Title</th>
                            <th>Instruction</th>
                            <th>Extract</th>
                            <th>class="text-center">Active</th>
                            <th class="text-center">Edit</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Code Extract 2 (dataTable population):

function showQuestions(quiz_id)
{
$('#questions_quiz_id').val('quiz_id');
window.questionsTable.fnClearTable();
$.post('{{ url("getGameQuestions") }}', {quiz_id : quiz_id})
.done(function(data)
{
    if (typeof(data.error) != 'undefined')
    {
        $('#error-msg').html(data.error);
        $('#page-error').fadeIn(300).delay(2000).fadeOut(500);
    }
    else
    {
        for(var d in data)
        {
            var question = data[d]; 
            var active = (question.active == undefined || question.active == false) ? "Inactive" : "Active";

            var ai = window.questionsTable.fnAddData([
                question.code,
                question.title,
                question.instruction,
                question.extract,
                active,
                '<i class="icon-pencil" style="cursor:pointer; color:#E48A07;" title="Edit" onclick="setQuestion('+question.id+')"></i>'
            ]);
            var oSettings = window.questionsTable.fnSettings();
            var addedRow = oSettings.aoData[ai[0]].nTr;
            addedRow.cells.item(2).setAttribute('width','29%');
            addedRow.cells.item(4).className = "text-center";
            addedRow.cells.item(4).className = "text-center";
            addedRow.cells.item(5).className = "text-center";
        }
        $('#questionsModal').modal('show');
    }
});
}

Answer 1

Try removing

<div class="responsive-table"> it might be causing responsive widths in the modal to fail.

You could also try specifying a max-width on the table .

This might be slightly related although it was a problem with Bootstrap 2.3.2 and it looks like you are using 3.

http://www.bootply.com/88364

Answer 2

This question is asked here datatables does not becomes responsive on bootstrap3 modal dialog

I would suggest you enable the Datatables Responsive extension, ditch the wrapper and use this snippet of code instead.

//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
           //Get the datatable which has previously been initialized
            var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
            //recalculate the dimensions
            dataTable.columns.adjust().responsive.recalc();

        });

Answer 3

After trying so many solutions i found one who works for me!

Just put the table inside a div and define the CSS inside the code.

<div style="overflow:auto;">
<table>
      .....
</table>
</div>

I hope this help!!

Answer 4

Remove the <div class="row"> and check. Am also experienced same problem,after i removed the div, i got it perfectly.

Answer 5

After trying so many solutions i found a solution.

Just put the table inside a div and define the CSS inside the code.

<div style="overflow:auto;">
<table>
      .....
</table>
</div>

I hope this help!!

Answer 6

<div class="modal-body">
    <div class="row table-responsive">
        <div class="col-sm-12">
            <table id="example" class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th class="site_name">
                            Feedback
                        </th>
                        <th>
                            Ticket Id
                        </th>
                        <th>
                            Date of Creation
                        </th>
                        <th>
                            Classification
                        </th>
                        <th>
                            Topic
                        </th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

Answer 7

initialize the datatable like that initialize the datatable when open the modal.first time when we open the modal i==1 second thime i==2 so datatble cant reinitalize again and again does not give any alert box like datatable already initalize

var i=1;
$('#myModal').on('shown.bs.modal', function (e) {
if(i==1){
     var oTable=$('#questionsTable').DataTable();
 }
 i++;
});  

Answer 8

Just insert your table inside a div with "table-responsive" class:

<div class="table-responsive">
  //Your table here
</div>