re-taille de la boîte de dialogue modale dans le bootstrap de façon dynamique

J'ai un Modal Popup ("Bootstrap") qui affiche le contenu basé sur la sélection de l'utilisateur

J'ai utilisé ce que ma référence, a Également ajouté ça à mon script de la section dans la page aspx

C'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 censé être affiché à l'intérieur de l'modal popup mais la table est à l'extérieur de la fenêtre modale (il y a un problème avec la largeur de la fenêtre modale, mais le table-responsive semblent être au travail), Mais quand j'ai redimensionner le navigateur pour correspondre à la largeur de la tablette de la table/modal de l'auto redimensionne correspondent les uns aux autres.
La largeur de la 2ème et de la 3ème cas de l'modal semblent bien fonctionner.

C'est le code de la fenêtre modale c'est d'être appelé

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

Plein Écran Du Navigateur
Redimensionnement Du Navigateur

ce lien a été ma référence. je l'ai déjà fait. Toujours pas aller
Avez-vous jamais comprendre quoi que ce soit???
nope désolé @Lumineux.
Double de Comment redimensionner Twitter Bootstrap modal de façon dynamique en fonction du contenu qui a été posté et a répondu à 6 mois avant cette.
J'ai lié la question exacte dans mon post comme référence.

OriginalL'auteur jayeshkv | 2013-10-16

20

Par défaut boottrap définit la largeur de l' .modale de dialogue à 600px (grands écrans au-dessus de 768 px) ou auto (petits écrans). Le code ci-dessous le remplacer:
```
$('#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 aurez besoin de calculer la largeur (jQuery largeur() ou innerwidth())de votre table et de définir la largeur de la modale de dialogue selon elle.

Voir: http://bootply.com/88364

c'est exactement ce que j'ai utilisé et il n'est toujours pas de travail.
voir: bootply.com/88364

OriginalL'auteur 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;   
}

Brillant. Fonctionne parfaitement. Pas besoin de javascript.

OriginalL'auteur Amit Shah

De changer cela pour que votre code

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

et ce

<div class="table-responsive" style="width:100%">

OriginalL'auteur Savan Kachhiya Patel

2

Si vous définissez display: table; à l'intérieur de la div en tenant le modal, il va redimensionner en conséquence. Mon modal est déplaçable et n'est pas redimensionnée lorsque vous modifiez la taille du navigateur, mais c'est la seule solution viable que j'ai trouvé pour dynamique modale tailles.

OriginalL'auteur Luminous
1
```
$('#myModal').on('shown.bs.modal', function () {
    $(this).find('.modal-dialog').addClass('modal-lg');
});
```
s'il vous plaît ajouter des explications.
Regarde comme il est dit, pour ajouter le modal-lg classe.

OriginalL'auteur M.Thenmozhi
0

J'ai eu le même problème et a trouvé que le problème n'était pas le modèle lui-même. J'ai ajouté un ID pour chaque élément à l'intérieur de la et via CSS, il suffit d'ajouter un width:100% à tous.

Il a travaillé pour moi.

ceci peut être utilisé comme un sale correctif.

OriginalL'auteur user3460493

Vous devez vous connecter pour publier un commentaire.