J'ai un Popup Modal (Bootstrap) qui affiche un contenu basé sur la sélection de l'utilisateur
Ceci est le code javascript que j'ai utilisé pour vérifier la sélection des utilisateurs
PlayerMP.getFunctionalDetails = function (type, UserID, SessionID, SessionNo) {
$.ajax({
type: "GET",
url: PlayerMP.URL,
data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo,
success: function (FunctionalSplitsJS) {
if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {
$("#divFunctionalDetails").html(FunctionalSplitsJS);
switch (type) {
case 1:
$("#divFunctionalsSplit"); //the table goes out of the modal window
break;
case 2:
TallyFunctionalSheet();
$("#divFunctionalsSplit");
break;
case 3:
$("#divFunctionalsSplit");
break;
}
$("#divFunctionalsSplit").modal('show');
}
else
window.location.href = "../Login.aspx?SessionExpired=1";
}
});
}
table-responsive
semble fonctionner) pour correspondre à la largeur de la tablette, le tableau/modal est automatiquement redimensionné.C’est le code de la fenêtre modale appelée
<div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="table-responsive">
<div id="divFunctionalDetails"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
Par défaut, boottrap définit la largeur de la boîte de dialogue .modal à 600px (grands écrans de plus de 768 px) ou auto (petits écrans). Le code ci-dessous écrase ceci:
$('#myModal').on('shown.bs.modal', function () {
$(this).find('.modal-dialog').css({width:'auto',
height:'auto',
'max-height':'100%'});
});
(basé sur: https://stackoverflow.com/a/16152629/2260496 )
Pour le rendre plus dynamique, vous devrez calculer la largeur (jQuery width () ou innerwidth ()) de votre tableau et définir la largeur de la boîte de dialogue modale en conséquence.
Voir: http://bootply.com/88364
Cela a fonctionné pour moi au moins:
.modal-dialog{
position: relative;
display: table; /* <-- This makes the trick */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
Changez ceci en votre code
<div class="modal-dialog" style="width: 95%">
et ça
<div class="table-responsive" style="width:100%">
Si vous définissez display: table;
dans le div contenant le modal, il sera redimensionné en conséquence. Mon modal est déplaçable et ne redimensionne pas lorsque vous modifiez la taille du navigateur, mais c'est la seule solution viable que j'ai trouvée pour les tailles modales dynamiques.
$('#myModal').on('shown.bs.modal', function () {
$(this).find('.modal-dialog').addClass('modal-lg');
});
J'ai eu le même problème et a constaté que le problème n'était pas le modal lui-même. J'ai ajouté un identifiant à chaque élément à l'intérieur du et via CSS, il suffit d'ajouter une largeur: 100% pour chacun d'entre eux.
Cela a fonctionné pour moi.