web-dev-qa-db-fra.com

redimensionner dynamiquement la boîte de dialogue modale dans le bootstrap

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";
    }
});
}
  • Le premier cas a une table qui est supposée être affichée à l'intérieur de la fenêtre contextuelle modale mais la table sort de la fenêtre modale (il y a un problème avec la largeur de la fenêtre modale mais le table-responsive semble fonctionner) pour correspondre à la largeur de la tablette, le tableau/modal est automatiquement redimensionné.
  • La largeur des deuxième et troisième cas du modal semble bien fonctionner.

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>
  • Navigateur plein écranFull screen image
  • Navigateur redimensionnéResized Image
javascriptcssmodal-dialogtwitter-bootstrap-3
7
jayeshkv

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

20
Bass Jobsen

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;   
}
14
Amit Shah

Changez ceci en votre code

<div class="modal-dialog" style="width: 95%">

et ça

<div class="table-responsive" style="width:100%">
2
Savan Kachhiya Patel

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.

2
Luminous
$('#myModal').on('shown.bs.modal', function () {
    $(this).find('.modal-dialog').addClass('modal-lg');
});
1
M.Thenmozhi

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.

0
user3460493