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

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