jQuery datatables débordements dans le bootstrap modal

J'ai une table à l'intérieur d'un modal bootstrap. Le contenu que j'remplir l'intérieur de la dataTable cellules est assez grand, et au lieu d'envelopper le texte pour adapter le tableau à l'intérieur du modal, elle déborde le modal, comme il est impossible de ramasser le modal largeur et le texte à la ligne.

Capture d'écran:

J'ai essayé diverses solutions, telles que la spécification de l'envelopper CSS ainsi que la spécification de la largeur de la table (en % et en px) et le réglage de la largeur de la propriété sur la table (en % et en px), mais il n'y a absolument aucun changement à la table. Des conseils sur la façon de corriger ce problème serait grandement apprécié.

Code Extrait 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 Extrait 2 (dataTable de la 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');
}
});
}

OriginalL'auteur Magnanimity | 2014-02-21

6

Essayez de supprimer

<div class="responsive-table"> il peut être à l'origine sensible des largeurs modale à l'échec.

Vous pouvez également essayer de préciser un max-width sur le table.

Ce qui peut être légèrement liées bien que c'était un problème avec Bootstrap 2.3.2 et il semble que vous utilisez 3.

http://www.bootply.com/88364

C'était déjà le défilement sur y, mais ce n'était pas l'effet désiré, la Magnanimité voulait envelopper le contenu de la table.

OriginalL'auteur bJacoG
4

Cette question est posée ici
datatables ne devient sensible sur bootstrap3 boîte de dialogue modale

Je vous suggère d'activer les tables de données Sensibles extension, fossé, à l'emballage et à l'utilisation de cet extrait de code à la place.
```
//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();
});
```
très sympa! cela n'a pas fonctionné pour moi jusqu'à ce que je me suis tourné sur le scrollX option. impair.
aussi, je l'ai eu en travaillant avec des .columns.adjust();

OriginalL'auteur Andrew
3

Après avoir essayé tant de solutions, j'en ai trouvé un qui fonctionne pour moi!

Il suffit de mettre la table à l'intérieur d'un div et de définir le CSS dans le code.
```
<div style="overflow:auto;">
<table>
.....
</table>
</div>
```
J'espère que cela aide!!

OriginalL'auteur Vanderlei Vinicius
2

Supprimer la <div class="row"> et vérifier.
Suis également connu le même problème,j'ai enlevé la div, je l'ai parfaitement.

OriginalL'auteur Kavi Kumar
1

Après avoir essayé tant de solutions que j'ai trouvé une solution.

Il suffit de mettre la table à l'intérieur d'un div et de définir le CSS dans le code.
```
<div style="overflow:auto;">
<table>
.....
</table>
</div>
```
J'espère que cela aide!!

OriginalL'auteur Vanderlei Vinicius

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

Essayez au-dessus de La classe container.

OriginalL'auteur Arpit Gupta

0

initialiser le datatable comme ça
initialiser la table de données lorsqu'il est ouvert le modal.première fois, lorsque l'on ouvre les modal i==1 seconde thime i==2 donc datatble cant reinitalize encore et encore, ne donne aucune boîte d'alerte comme datatable déjà initalize
```
var i=1;
$('#myModal').on('shown.bs.modal', function (e) {
if(i==1){
var oTable=$('#questionsTable').DataTable();
}
i++;
});  
```
Cela peut être une solution à la question bt il serait une bien meilleure réponse si vous l'avez expliqué pourquoi c'est une solution et comment il fonctionne.
initialiser la table de données lorsqu'il est ouvert le modal.première fois, lorsque l'on ouvre les modal i==1 seconde thime i==2 donc datatble cant reinitalize encore et encore, ne donne aucune boîte d'alerte comme datatable déjà initalize

OriginalL'auteur charu joshi
0

Il suffit d'insérer votre table à l'intérieur d'un div avec la table "sensible" de la classe:
```
<div class="table-responsive">
//Your table here
</div>
```
OriginalL'auteur Marcelo Agimóvel

Vous devez vous connecter pour publier un commentaire.