Erhöhen Sie die Modalgröße für Twitter Bootstrap

Ich versuche, die Größe des modalen Formulars zu ändern oder es auf den Inhalt zu reagieren, den ich dort wiedergebe. Ich verwende es zum Rendern eines Formulars und würde mich bei Bedarf lieber mit dem Scrollen befassen.

Das Formular, das ich rendere, benötigt wahrscheinlich weitere 50 Pixel - nur die Schaltflächen fehlen.

Daher habe ich versucht, die .modal-Stile in meiner Datei application.css.scss (Using Rails 3.2) zu überschreiben, aber die Deklerationen für maximale Höhe und Überlauf scheinen überschrieben zu sein.

Irgendwelche Gedanken?

Ich hatte genau das gleiche Problem, Sie können versuchen:

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

Wenn Sie feststellen, dass die Bildlaufleisten nur im Körperteil des modalen Dialogfelds angezeigt werden, bedeutet dies, dass die maximale Höhe nur des Körpers angepasst werden muss.

in Bootstrap 3:

.modal-dialog{
  width:whatever
}

Sie müssen sicherstellen, dass es sich auf dem # myModal .modal-body-Element befindet, nicht nur auf #myModal (einige Leute machen diesen Fehler), und Sie möchten möglicherweise auch die Höhenänderung berücksichtigen, indem Sie die Modalränder ändern.

Verwenden Sie die neue CSS3-Messung 'vh' (oder 'vw' für die Breite) (mit der die Höhe als Bruchteil des Ansichtsfensters festgelegt wird):

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

Auf diese Weise können Sie dieses Design auch in Ihren Modalen beibehalten, wenn Sie ein responsives Framework wie Bootstrap verwenden.

Wenn Sie zwei Methoden für Breite und Höhe mischen, haben Sie einen guten Hack:

CSS:

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

JQuery:

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

Dieser ist der, den ich benutze. Es behebt Probleme mit dem Rand und den Bildlaufleisten sowohl für die Breite als auch für die Höhe, ändert jedoch nicht die Größe des Modals, um es an den Inhalt anzupassen.

Hoffe ich war hilfreich!

Verwenden einer CSS-Klasse (Sie können auch den Stil überschreiben - nicht empfohlen):

(html)

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

(CSS)

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

Ich habe die Antwort bekommen ... die Sache ist, dass Sie das Attribut max-height überschrieben haben, um die Größe des Bootstrap-Modals über die 500px-Höhenbeschränkung hinaus zu ändern

Bootstrap Großes Modell

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

Bootstrap Kleines Modell

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

Stellen Sie einfach die ".modal-body" -Höhe ein: 100% Die Höhe wird automatisch gemäß Ihrem Inhalt angepasst und die "maximale Höhe" gemäß Ihrem Bildschirm festgelegt ...

Haben Sie den Größenparameter ausprobiert:

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

Optionale Größen

Modale haben zwei optionale Größen, die über Modifikatorklassen verfügbar sind und in einem .modal-Dialog platziert werden können.

1. Standard: 600px
2. sm: klein, Breite 300px
3. lg: groß, Breite 900px

Wenn Sie etwas anderes möchten, aktualisieren Sie die Datei 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;
  }
}

Für Boostrap> 4 hat das bei mir funktioniert:

.modal-content{
  width: 1200px;
}

eine fortgeschrittenere Version:

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

Hier ist ein Codepen:

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

Angenommen, Ihr Modal hat die ID des modal1folgenden CSS, würde die Höhe des Modals erhöhen und einen Überlauf anzeigen.

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

Ich habe einige der oben genannten Versuche unternommen, um bestimmte Größen für Breite und Höhe festzulegen (um ein Bild in einem Modal anzuzeigen), und da mir keiner der oben genannten Punkte geholfen hat, habe ich beschlossen, die Stile zu überschreiben, und dem Haupt-Div> Folgendes hinzugefügt class = "Modal Hide Fade In": dh dem Style-Tag eine Breite für den Hintergrund des Modals hinzugefügt.

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

und fügte dann die folgenden 'Stil'-Tags zum Modalkörper hinzu:

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

funktioniert jetzt wie ein Zauber, ich zeige ein Bild an und jetzt passt es perfekt.

Das hat bei mir funktioniert:

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

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

Beachten Sie, dass in meinem Fall, ich verschachtelte Modalverben habe, von denen jede Kontrolle , die unterschiedlichen Höhen erfordern , wenn ich Knie Steuerung der Anzeige innerhalb der verschachtelten modal , so konnte ich das nicht für max-height statt height: 100% funktioniert gut für mich.

Vergessen Sie nicht die optionalen Bootstrap-Klassen modal-lgund modal-smwenn Sie innerhalb des responsiven Frameworks bleiben möchten. Fügen Sie unter Ihrem Formular einen Clearfix hinzu, der abhängig von Ihrer Struktur hilfreich sein kann.

Ich habe es kürzlich versucht und es richtig verstanden: Ich hoffe, das wird hilfreich sein

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

Dadurch wird die Höhe Ihres Modells angepasst.

Hier ist eine weitere einfache Methode, um das Bootstrap-Modal zu vergrößern:

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

Die Breite des Modals kann in Prozent des Bildschirms angegeben werden. Im obigen Beispiel habe ich es auf 80% meiner Bildschirmbreite eingestellt.

Unten ist ein Arbeitsbeispiel dafür:

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