Aumenta le dimensioni modali per Bootstrap di Twitter

Sto provando a cambiare la dimensione della forma modale o meglio - far sì che risponda al contenuto che visualizzo lì. Lo sto usando per eseguire il rendering di un modulo e preferirei gestire lo scorrimento se necessario.

Il modulo che visualizzo probabilmente ha bisogno di altri 50 px - mancano solo i pulsanti.

Quindi ho provato a sovrascrivere gli stili .modal nel mio file application.css.scss (Using Rails 3.2) ma le declerazioni di altezza massima e overflow sembrano essere sovrascritte.

qualche idea?

Avevo lo stesso identico problema, puoi provare:

.modal-body {
    max-height: 800px;
}

Se noti che le barre di scorrimento vengono visualizzate solo nella sezione del corpo della finestra di dialogo modale, significa che l'altezza massima del solo corpo deve essere regolata.

in Bootstrap 3:

.modal-dialog{
  width:whatever
}

Devi assicurarti che sia sull'elemento #myModal .modal-body non solo #myModal (alcune persone hanno commesso questo errore) e potresti anche voler accontentare il cambio di altezza cambiando i margini dei modali.

Utilizzando la nuova misurazione CSS3 'vh' (o 'vw' per larghezza) (che imposta l'altezza come una frazione della porta della vista) usare:

.modal-body {
    max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}

In questo modo, se stai utilizzando un framework reattivo, come Bootstrap, puoi mantenere quel design anche nelle tue modali.

Mischiando due metodi per larghezza e altezza e hai un buon trucco:

CSS:

#myModal .modal-body {max-height: 800px;}

JQuery:

$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})

Questo è quello che uso. Risolve i problemi di margine e barre di scorrimento sia in larghezza che in altezza, ma non ridimensionerà il modale per adattarlo al suo contenuto.

Spero di essere stato di aiuto!

Usando una classe CSS (puoi anche sovrascrivere lo stile - non consigliato):

(Html)

<div class="modal-body custom-height-modal" >

(Css)

.custom-height-modal {
  height: 400px;
}

Ho la risposta ... il fatto è che hai sovrascritto l'attributo max-height e che il bootstrap modale può essere ridimensionato oltre il limite di altezza di 500px

Bootstrap Modello grande

<div class="modal-dialog modal-lg">

Bootstrap Modello piccolo

<div class="modal-dialog modal-sm">

Basta impostare l'altezza ".modal-body": 100% regolerà automaticamente l'altezza secondo i tuoi contenuti e inserirà "max-height" secondo lo schermo ...

Hai provato il parametro size:

return $modal.open({
  backdrop: 'static',     
  size: 'sm',                   
  templateUrl: "app/views/dialogs/error.html",
  controller: "errorDialogCtrl",

Dimensioni opzionali

I modali hanno due dimensioni opzionali, disponibili tramite classi di modificatori da posizionare in una finestra di dialogo .modal.

1. impostazione predefinita: 600 px
2. sm: piccolo, larghezza di 300px
3. LG: grande, larghezza di 900 px

Se vuoi qualcosa di diverso, aggiorna bootstarp.css

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
  .modal-xy {  // custom
    width: xxxpx;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Per Boostrap> 4 ha funzionato per me:

.modal-content{
  width: 1200px;
}

una versione più avanzata:

body .modal-content{
  width: 160%!important;
  margin-left: -30%!important;
}

ecco un codice:

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

Supponendo che il tuo modale abbia un ID del modal1seguente CSS aumenterebbe l'altezza del modale e mostrerebbe qualsiasi overflow.

#modal1 .modal-body{
    max-height: 700px;
    overflow: visible;
}

Ho provato alcuni dei precedenti come necessario per impostare dimensioni specifiche di larghezza e altezza (per visualizzare un'immagine in modale) e poiché nessuno sopra mi ha aiutato ho deciso di sovrascrivere gli stili e ho aggiunto quanto segue al <div> principale che ha class = "modal hide fade in" al suo interno: ovvero ha aggiunto una larghezza al tag di stile per lo sfondo del modale.

style="display: none; width:645px;"

e quindi aggiunto i seguenti tag 'style' al corpo modale:

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

funziona come un fascino ora, sto visualizzando un'immagine e ora si adatta perfettamente.

Questo ha funzionato per me:

#modal1 .modal 
{ 
     overflow-y: hidden; 
}

#modal1 .modal-dialog 
{ 
     height: 100%; 
     overflow-y: hidden; 
}

Nota che nel mio caso, ho modali nidificati, ognuno con controlli che richiedono altezze diverse quando commuto il display di controllo all'interno del modale nidificato , quindi non ho potuto applicare l' altezza massima , invece l' altezza: il 100% funziona bene per me.

Non dimenticare le classi di bootstrap opzionali modal-lge modal-smse vuoi rimanere all'interno del framework reattivo. E aggiungi un clearfix sotto il tuo modulo, che può aiutare a dipendere dalla tua struttura.

Di recente stavo provando questo e ho capito bene: spero che questo possa essere utile

 .modal .modal-body{
        height: 400px;
    }

Questo regolerà l'altezza del tuo modello.

Ecco un altro semplice metodo per aumentare le dimensioni del modale bootstrap:

$(".modal-dialog").css("width", "80%");

La larghezza del modale può essere specificata in termini di percentuale dello schermo. Nell'esempio sopra ho impostato l'80% della larghezza del mio schermo.

Di seguito è riportato un esempio funzionante dello stesso:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>