ri-formato la finestra di dialogo modale in bootstrap dinamicamente

Question

Ho un Modal Popup (bootstrap) che visualizza i contenuti in base alla selezione dell'utente

• I've used this as my reference, Also added this to my script section in the aspx page

Questo è il codice javascript che ho utilizzato per controllare la selezione utenti

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"; 
    } 
}); 
} 

• il primo caso ha un tavolo WHI si suppone che ch sia visualizzato all'interno del popup modale ma che la tabella vada fuori dalla finestra modale (c'è un problema con la larghezza della finestra modale ma il table-responsive sembra funzionare) Ma quando ridimensiono il browser in modo che corrisponda alla larghezza del tablet il tavolo/ridimensionamento automatico modale per abbinarsi.
• La larghezza del 2 ° e del 3 ° caso del modale sembra funzionare correttamente.

Questo è il codice per il thats finestra modale viene chiamato

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

• Browser FullScreen
• ridimensionata Browser

Answer 1

Per impostazione predefinita, boottrap imposta la larghezza della finestra di dialogo .modal su 600px (schermi di grandi dimensioni sopra 768 px) o automatica (schermi piccoli). Il codice qui sotto sovrascrivere questo:

$('#myModal').on('shown.bs.modal', function() { 
    $(this).find('.modal-dialog').css({width:'auto', 
           height:'auto', 
           'max-height':'100%'}); 
}); 

(basata su: https://stackoverflow.com/a/16152629/2260496)

Per renderlo più dinamico sarà necessario per calcolare la larghezza (larghezza jQuery() o innerWidth()) della tabella e impostare la larghezza della finestra di dialogo modale che la definisce.

See: http://bootply.com/88364

Answer 2

Ho avuto lo stesso problema e ha scoperto che il problema non era il modal in sé. Ho aggiunto un ID per ogni elemento all'interno del e tramite CSS aggiungo solo una larghezza: 100% a tutti loro.

Ha funzionato per me.

Answer 3

Modificare questo al codice

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

e questo

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

Answer 4

Se si imposta display: table; all'interno del div tenendo modale che sarà ridimensionare di conseguenza. La mia modal è trascinabile e non viene ridimensionata quando si modifica la dimensione del browser, ma questa è l'unica soluzione praticabile che ho trovato per le dimensioni modali dinamiche.

Answer 5

questo ha lavorato per me atleast:

.modal-dialog{ 
    position: relative; 
    display: table; /* <-- This makes the trick */ 
    overflow-y: auto;  
    overflow-x: auto; 
    width: auto; 
    min-width: 300px; 
} 

Answer 6

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