web-dev-qa-db-de.com

Bootstrap modal body max höhe 100%

Ich habe einen modifizierten Bootstrap-Body mit einer benutzerdefinierten Größe (80% Höhe), der scrollt (der Body-Inhalt läuft auf einigen Bildschirmen über)

Es gibt zwei Probleme:

  1. Ich kann die maximale Höhe nicht auf 100% setzen, da dies 100% des gesamten Dokuments und nicht die maximale Höhe des Containers ist. Dies ist, was ich brauche, damit das Scrollen richtig funktioniert.
  2. Wenn sich am Ende des Modalkörpers ein div mit fester Höhe befindet, wird es außerhalb des Modals überlaufen, wenn der Bildschirm nicht groß genug für den Inhalt ist.

Wie würde ich das beheben? Ich experimentiere derzeit mit negativen Margen, aber ich bin damit nicht so vertraut.

JavaScript-Lösungen sind akzeptabel (jQuery ist ebenso wie backbone.js verfügbar).

Vielen Dank

Bearbeiten: Screenshot zur Verfügung gestellt

enter image description here

Bearbeiten Sie 2: Weitere Screenshots

enter image description here

13
Pwnna

Ich gab nach und schrieb ein Kaffeeskript, um das zu beheben. Wenn jemand interessiert ist, hier das Kaffeeskript:

fit_modal_body = (modal) ->
  header = $(".modal-header", modal)
  body = $(".modal-body", modal)

  modalheight = parseInt(modal.css("height"))
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"))
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"))

  height = modalheight - headerheight - bodypaddings - 5 # fudge factor

  body.css("max-height", "#{height}px")

# Here you need to bind your event with the appropriate modal, as an example:
$(window).resize(() -> fit_modal_body($(".modal")))

Oder das entsprechende Javascript, wie es oben generiert wurde.

var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = modalheight - headerheight - bodypaddings - 5;
  return body.css("max-height", "" + height + "px");
};

$(window).resize(function() {
  return fit_modal_body($(".modal"));
});
8
Pwnna

Ich hatte das gleiche Problem mit einer langen Form. Javascript war für mich keine Option, also bekam ich eine vollständige HTML-CSS-Lösung.

Das Hauptziel bestand darin, es nur mit Prozentsätzen zu codieren, um die Medienabfragen auf einfache Weise erstellen zu können.

Ich habe es mit Firefox 22.0, Google Chrome 28.0.1500.71, Safari 6.0.5 und IE8 getestet. Hier ist die Demo .

Modale HTML-Struktur:

Der Schlüssel ist, die strukturellen Divs von Polsterung/Rand/Rand zu reinigen. Alle diese Stile sollten auf die darin enthaltenen Elemente angewendet werden.

<div id="dialog" class="modal hide dialog1" aria-hidden="false">
    <div class="modal-header">
    </div>
    <div class="modal-body">
        <div>
        </div>
    </div>
</div>

Styles:

Die Stile, die auf diese Struktur-Divs angewendet werden, bestimmen die Größe.

.modal.dialog1 { /* customized styles. this way you can have N dialogs, each one with its own size styles */
    width: 60%;
    height: 50%;
    left: 20%; /* ( window's width [100%] - dialog's width [60%] ) / 2 */
}

/* media query for mobile devices */
@media ( max-width: 480px ) {
    .modal.dialog1 {
        height: 90%;
        left: 5%; /* ( window's width [100%] - dialog's width [90%] ) / 2 */
        top: 5%;
        width: 90%;
    }
}

/* split the modal in two divs (header and body) with defined heights */
.modal .modal-header {
    height: 10%;
}

.modal .modal-body {
    height: 90%;
}

/* The div inside modal-body is the key; there's where we put the content (which may need the vertical scrollbar) */
.modal .modal-body div {
    height: 100%;
    overflow-y: auto;
    width: 100%;
}

Ausführlicheren Code finden Sie in der Demo , in der Sie ganze Styling-Klassen und die Bootstrap-Styles sehen, die deaktiviert/überschrieben werden müssen.

6
lluisaznar

probiere diesen Bootstrap Modal v2.1

https://github.com/jschr/bootstrap-modal

4
GianFS

Sie müssen lediglich die Höhe des modalen Popup-Fensters in der Show einstellen, die Höhe des Bildschirms/Fensters ermitteln und die Höhe des Modals einstellen. (Sie können es mit 0,8 multiplizieren, um 80% Bildschirmhöhe zu erhalten, was gut passt).

$('#YourModalId').on('show.bs.modal', function () {
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    var _height = $(window).height()*0.8;
    $('.modal .modal-body').css('max-height', _height);
});
3
Deevan

Hier ist eine voll funktionsfähige Sass-Lösung, die erfordert Flexbox.

  // don't clamp modal height when screen is shorter than 400px
  // .modal-body is short in that case, and the default behavior
  // (entire modal will scroll) is easier to use
  @media(min-height:400px)
    .modal
      // use top/bottom margin here instead of .modal-dialog
      // so that .modal-dialog can use height: 100%
      margin: 30px
      // without overflow: visible the shadow will be clipped
      // at the bottom
      overflow: visible

      > .modal-dialog
        margin: 0 auto
        // height must be explicitly set for .modal-content to
        // use percentage max-height
        height: 100%

        > .modal-content
          display: flex
          flex-direction: column
          max-height: 100%

          > .modal-header,
          > .modal-footer,
            // don't allow header/footer to grow or shrink
            flex: 0 0 auto

          > .modal-body
            // allow body to shrink but not grow
            flex: 0 1 auto
            // make body scrollable instead of entire modal
            overflow-y: auto
2
Andy

Als Antwort auf die Antwort von pwnna funktioniert dieser Code besser für mich, da er mit einer variablen Höhe arbeitet, die von der Inhaltsgröße abhängt, und auch mit einer maximalen Höhe, und er läuft auch unter Last und nicht nur die Größe. 

//adjust modal body sizes
var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  footer = $(".modal-footer", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  footerheight = parseInt(footer.css("height")) + parseInt(footer.css("padding-top")) + parseInt(footer.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = $(window).height() - headerheight - footerheight - bodypaddings - 150;
  return body.css({"max-height": "" + height + "px", 'height':'auto'});
};

fit_modal_body($(".modal"));
$(window).resize(function() {
  return fit_modal_body($(".modal"));
});
2
tsdexter

sie sollten versuchen, es absolut innerhalb eines Elements zu positionieren, dessen Position auf relativ gesetzt ist. Da kannst du dann mit sowas arbeiten

{
    bottom:0;
    top:0;
    left:0;
    right:0;
0
Luke

Stellen Sie sicher, dass die Elemente html und body das Fenster ausfüllen:

html, body { height: 100%; }

Jetzt können Sie max-height: 100% für das Element innerhalb des Hauptteils verwenden, und es wird 100% des Fensters sein, da das body-Element jetzt die Größe des Fensters hat.

0
Guffa

Dieser Code 

//adjust modal body sizes
var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  footer = $(".modal-footer", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  footerheight = parseInt(footer.css("height")) + parseInt(footer.css("padding-top")) + parseInt(footer.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = $(window).height() - headerheight - footerheight - bodypaddings - 150;
  return body.css({"max-height": "" + height + "px", 'height':'auto'});
};

fit_modal_body($(".modal"));
$(window).resize(function() {
  return fit_modal_body($(".modal"));
});

Geschrieben von tsdexter , hat es für mich funktioniert!

0
Daniel de Lima

Pwnnas Antwort hat ein gutes Konzept, Knospe funktioniert nicht für mich ... Hier eine Lösung, die für mich funktioniert

fit_modal_body = function (modal, padding) {
    var windowHeight = $(window).height();
    var modalHeight = modal.height();

    var dif = windowHeight - (modalHeight + 2*padding);
    var modalBody = $(".modal-body:first", modal);
    modalBody.css("max-height", modalBody.height() + dif);
};

resizeLastWindow = function () {
    fit_modal_body($(".modal-dialog:last"), 15);
};

$(window).resize(resizeLastWindow);

Es hängt von css ab:

.modal-body {
    overflow-y: auto; 
}
0
elnino3800