JQuery dataTable overflow in bootstrap modal

Question

I have a table in the bootstrap module. The content that I fill inside the dataTable cells is quite large, and instead of wrapping the text to fit the table inside the modal, it overflows the modal, since it cannot raise the modal width and wrap the text.

Screenshot:

I tried various solutions, such as specifying a CSS wrapper, as well as specifying the width of the table (in% and px) and setting the width property in the table (in% and px), but there are absolutely no changes to the table, Any recommendations on how fix this problem will be greatly appreciated.

Extract code 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>

Extract code 2 (data set):

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

<div class="responsive-table"> , ​​ .

.

, Bootstrap 2.3.2, , 3.

http://www.bootply.com/88364

Answer 2

datatables bootstrap3

Datatables Responsive, .

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

<div class="row"> . ​​ , div, .

Answer 4

, , !

div CSS .

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

, !

Answer 5

, .

div CSS .

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

, !

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

datatable datatable, modal.first , modal == 1 second thime == 2, datatble can not reinitalize , , datatable

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