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

154

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?

Ein Kuchen
quelle
Ich habe die gleiche Frage ... Chrome sagt, dass die
Höheseigenschaft
Ich denke, das könnte helfen.
Synchro

Antworten:

115

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.

Rabih Kodeih
quelle
14
Das Einstellen der maximalen Höhe für den Modalkörper reicht nicht aus, da die Unterseite des Modals möglicherweise aus dem Bildschirm verschoben wird. Ich hatte Erfolg mit: .modal {top: 5%; unten: 5%; } .modal-body {maximale Höhe: 100%; Höhe: 85%; }
Csongor Fagyal
2
Ich musste height: 800px anstelle von max-height: 800px verwenden, damit es funktioniert.
Kybernetisch
34

in Bootstrap 3:

.modal-dialog{
  width:whatever
}
Mentok
quelle
Angesichts des Datums, an dem die Frage gestellt wurde, glaube ich nicht, dass TB3 ein Problem war. Aber auf jeden Fall danke für den Tipp, es ist wirklich hilfreich!
Dennis Braga
2
Nur um zu verdeutlichen, wenn Sie nur die Größe eines bestimmten Modals einstellen möchten, können Sie dies tun: #modal_ID .modal-dialog { width: 800px }
Greg A
22

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.

Leon Revill
quelle
9
Der Link starb :(
Dan
18

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.

Chris Paton
quelle
8

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!

pr.nizar
quelle
Ich habe versucht, die JQuery zum Laufen zu bringen, aber ich hatte kein Glück. Kannst du helfen? Wo soll ich die JQuery verwenden?
Samuel Taylor
Die maximale Höhe des Modals führt dazu, dass die untere Hälfte verschwindet und nicht scrollbar ist. (wie @mcabral vorgeschlagen)
Nagytech
4

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;
}
xgMz
quelle
3

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

Fespinozacast
quelle
Ich habe die maximale Höhe für die .modal-Klasse ausprobiert, aber es hat auch nicht funktioniert. Können Sie vielleicht das CSS teilen, das Sie verwendet haben?
Apie
4
.modal {Höhe: 600px; maximale Höhe: 700px; }. Genau das
Fespinozacast
1
Das Problem bei diesem Ansatz ist, dass die hintere Überlagerung nicht erweitert wird, sodass ein Teil des Popups möglicherweise nicht erreichbar ist
mcabral
2

Bootstrap Großes Modell

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

Bootstrap Kleines Modell

<div class="modal-dialog modal-sm">
Adnan Ahmad
quelle
1

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

Shailender Ahuja
quelle
1

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;
  }
}
Ali Adravi
quelle
1

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

Alfredo Morales Pinzón
quelle
0

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;
}
Kevin Bowersox
quelle
0

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.

FlashTrev
quelle
Gibt es einen Grund, warum dies abgelehnt wurde? Einige Rückmeldungen darüber, wann Sie glauben, dass ein Fehler gemacht wurde oder ein nicht wahrheitsgemäßer / nicht verwandter Kommentar abgegeben wurde, wären hilfreich.
FlashTrev
0

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.

Dhruvpatel
quelle
0

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.

JSV
quelle
0

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.

Anjula Ranasinghe
quelle
0

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>

Zax
quelle