it-swarm.com.de

Stellen Sie die modifizierte Körpergröße des Bootstraps in Prozent ein

Ich versuche, einen Modal mit einem Körper zu erstellen, der einen Bildlauf ausführt, wenn der Inhalt zu groß wird. Ich möchte jedoch, dass der Modal auf die Bildschirmgröße anspricht. Wenn ich die maximale Höhe auf 40% stelle, hat dies keine Auswirkung. Wenn ich jedoch die maximale Höhe auf 400px setze, funktioniert es wie erwartet, reagiert aber nicht. Ich bin sicher, ich vermisse einfach etwas einfaches, aber ich scheine es nicht zu schaffen, dass es funktioniert.

Hier ist ein Beispiel

Funktioniert nicht

.modal-body {
    max-height:40%; 
    overflow-y: auto;
}

Werke:

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}
22
thraxst

Das hat bei mir funktioniert

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}

Geige: http://jsfiddle.net/mehmetatas/18dpgqpb/2/

39
Mehmet Ataş

Anstatt ein% zu verwenden, setzen die Einheiten vh einen Prozentsatz der Größe des Ansichtsfensters (Browserfensters). 

Ich konnte ein Modal mit einem Bild und einem Text darunter einstellen, um mit vh auf die Browserfenstergröße zu reagieren.

Wenn Sie nur möchten, dass der Inhalt einen Bildlauf durchführt, können Sie den Teil weglassen, der die Größe des modalen Körpers einschränkt.

/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
.modal-dialog {
  margin: 2.5vh auto;
}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
  max-height: 95vh;
  overflow: scroll;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
  max-height: 90vh;
}
/*Sets the maximum height of the modal image to 69% of the screen height*/
.modal-body img {
  max-height: 69vh;
}
25
Ryan

Dies sollte für jeden funktionieren, für alle Bildschirmauflösungen:

.modal-body {
    max-height: calc(100vh - 143px);
    overflow-y: auto; }

Zählen Sie zuerst Ihre modale Kopf- und Fußzeilenhöhe. In meinem Fall habe ich H4-Überschrift, also habe ich sie auf 141px, die bereits modale Standardgrenze in 20px(top+bottom) gezählt wurde.

Der Subcode 141px ist also der max-height für meine modale Höhe. Um das bessere Ergebnis zu erzielen, gibt es sowohl den oberen als auch den unteren Rand von 1px. Dafür wird 143px perfekt funktionieren.

In einigen Fällen möchten Sie vielleicht overflow-y: auto; anstelle von overflow-y: scroll; verwenden. Versuchen Sie es.

Probieren Sie es aus und Sie erhalten das beste Ergebnis sowohl auf Computern als auch auf mobilen Geräten. Wenn Sie eine Überschrift haben, die größer als H4 ist, können Sie sie nachzählen, wie viel px Sie subtrahieren möchten.

Wenn Sie nicht wissen, was ich erzähle, ändern Sie einfach die Nummer von 143px und sehen Sie das beste Ergebnis für Ihren Fall.

Als letztes würde ich vorschlagen, dass es ein Inline-CSS hat.

6
bard

Sie haben zweifellos das Problem gelöst oder beschlossen, etwas anderes zu tun, aber da es nicht beantwortet wurde, stolperte ich darüber, als ich nach etwas Ähnlichem suchte.

Ich habe zwei div-Sets verwendet. Eines hat hidden-xs und ist für die Anzeige von sm, md & lg-Geräten. Der andere hat hidden-sm, -md, -lg und ist nur für Handys. Jetzt habe ich viel mehr Kontrolle über die Anzeige in meinem CSS.

Sie können eine grobe Idee in dieser js Geige sehen, bei der ich die Fußzeile und die Schaltflächen kleiner eingestellt habe, wenn die Auflösung -xs ist.

  <div class="modal-footer">
      <div class="hidden-xs">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      <div class="hidden-sm hidden-md hidden-lg sml-footer">
    <button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-xs btn-primary">Save changes</button>
      </div>
  </div>
3
VictorySaber

Die scss-Lösung für Bootstrap 4.0

.modal { max-height: 100vh; .modal-dialog { .modal-content { .modal-body { max-height: calc(80vh - 140px); overflow-y: auto; } } } }

Stellen Sie sicher, dass .modalmax-height100vh ist. Dann für .modal-body die Funktion calc() verwenden, um die gewünschte Höhe zu berechnen. Im obigen Fall möchten wir 80vh des Ansichtsfensters einnehmen, verkleinert um die Größe der Kopfzeile + Fußzeile in Pixel. Das sind ungefähr 140 Pixel, aber Sie können es leicht messen und Ihre eigenen benutzerdefinierten Werte anwenden. Für kleinere/größere modale 80vh entsprechend ändern.

0
lokers