Wie platziere ich eine Bildlaufleiste nur für den Modalkörper?

164

Ich habe folgendes Element:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div> 

Es zeigt einen modalen Dialog wie diesen. Im Grunde genommen wird die Bildlaufleiste um den gesamten Bereich herum platziert modal-dialogund nicht modal-bodyder Inhalt, den ich anzeigen möchte .

Das Bild sieht ungefähr so ​​aus:

Geben Sie hier die Bildbeschreibung ein

Wie bekomme ich nur eine Bildlaufleiste modal-body?

Ich habe versucht, zuzuweisen style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;", modal-bodyaber es hat nicht funktioniert.

Subodh Nijsure
quelle
1
Bitte geben Sie ein funktionierendes Beispiel an, um Ihnen besser zu helfen. Sie können dazu bootply.com/new verwenden.
Carlos Calla
Als nächstes erlauben Sie optionale Flüssigkeits-Kopf- und Fußzeilenblöcke innerhalb von Modal, so dass nur der Körper einen Bildlauf
durchführt

Antworten:

296

Sie haben das einstellen heightvon der .modal-bodyin und geben Sie es overflow-y: auto. Setzen Sie auch den .modal-dialogÜberlaufwert auf zurück initial.

Siehe das Arbeitsprobe:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}
Carlos Calla
quelle
Danke dafür. Es funktioniert großartig. Vielleicht ist mir etwas in CSS nicht klar. Ich habe versucht, eine maximale Körpergröße zuzuweisen: 65%, die nicht funktioniert. Die von Ihnen bereitgestellte Lösung funktioniert nur, wenn ich dem Modalkörper eine feste Höhe zuweise. Gibt es keine Möglichkeit zu sagen, dass der Modaldialog 85% des Fensters einnimmt und der Modalkörper etwa 90% des Modaldialogs einnimmt? Aber wieder funktioniert die von Ihnen bereitgestellte Lösung vorerst für mich. Vielen Dank!
Subodh Nijsure
3
@SubodhNijsure Entschuldigung für die späte Antwort. Sie können die Höhe nicht in% festlegen, da dies einen Prozentsatz des übergeordneten Elements bedeutet. In diesem Fall ist das übergeordnete Element .modal-content und seine Höhe hängt von den untergeordneten Elementen ab. Deshalb funktioniert es nur, wenn Sie eine dieser Höhen einstellen. Entweder legen Sie die Höhe des Modalinhalts oder die Höhe des Modalkörpers fest. Wenn Sie die Höhe des .modal-Inhalts festlegen, können Sie die Höhe des .modal-Körpers in% und in% des übergeordneten Elements festlegen. Wenn Sie also weniger als 100% festlegen, wird am Leerzeichen ein Leerzeichen angezeigt unten, da Sie nicht die gesamte Höhe des .modal-Inhalts ausfüllen.
Carlos Calla
Beachten Sie, dass das initialSchlüsselwort von CSS für Internet Explorer nicht funktioniert, obwohl es für Edge funktioniert.
Tryse
18
Nur ein kleiner Hinweis: Anstelle von "Höhe 250px", die auf einigen Telefonen mit einer Höhe von nur 230px oder weniger mit Navigationsleiste im Querformat hässlich aussehen könnte: Verwenden Sie max-height: 80vh;nur 80% der gesamten Ansichtsfensterhöhe und nur für die maximale Höhe, nicht wenn dies der Fall ist ist ein kleines Popup
Toskan
1
funktioniert gut, aber nach dem Schließen des Modals können die Links im 'übergeordneten' Fenster nicht mehr angeklickt werden ... gelöst mit folgendem Code: .modal .modal-body {max-height: 420px; Überlauf-y: auto; }
cwhisperer
119

Wenn Sie nur IE 9 oder höher unterstützen, können Sie dieses CSS verwenden, das problemlos auf die Größe des Fensters skaliert werden kann. Abhängig von der Höhe Ihrer Kopf- oder Fußzeile müssen Sie möglicherweise die "200px" anpassen.

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
Jonathan Marston
quelle
Laut [1] und [2] wird dies auch von Chrome, Firefox und Safari unterstützt. [1] developer.mozilla.org/en-US/docs/Web/CSS/… [2] developer.mozilla.org/en-US/docs/Web/CSS/…
ctron
Hinweis: Bei dieser Lösung wird das Popover abhängig von der oben oder unten ausgewählten Option unter Kopf- oder Fußzeile angezeigt. Siehe diese von mir erstellte Geige: jsfiddle.net/2qeo99k3/4 Ohne den CSS-Hack funktioniert es einwandfrei. Entfernen Sie es einfach in der Geige, um zu sehen es funktioniert
Marc Roussel
Eine Problemumgehung für das Popover finden Sie hier: stackoverflow.com/questions/45666828/…
Marc Roussel
36

Problem mit Mähdrescherlösung @carlos calla und @jonathan marston gelöst.

    /* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
Iib Thoyib Basarah
quelle
20

Für Bootstrap-Versionen> = 4.3

Bootstrap 4.3 hat Modals eine neue integrierte Bildlauffunktion hinzugefügt. Dadurch wird nur der Modal-Body- Inhalt gescrollt, wenn die Größe des Inhalts andernfalls die Seite scrollen würde. Um es zu verwenden, fügen Sie einfach die Klasse Modal-Dialog-Scrollable zu demselben Div hinzu, das die Modal-Dialog- Klasse hat.

Hier ist ein Beispiel:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Kodos Johnson
quelle
14

Hinzu kommt die großartige Antwort von Carlos Calla .

Die Höhe von .modal-body muss festgelegt werden, ABER Sie können Medienabfragen verwenden, um sicherzustellen, dass sie für die Bildschirmgröße geeignet sind.

.modal-body{
    height: 250px;
    overflow-y: auto;
}

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}
Laurakurup
quelle
Die Annahme, dass die Höhe auf einem mobilen Gerät 400 Pixel oder mehr beträgt, ist fehlerhaft. Die Verwendung der Breite zur Bestimmung der Höhe ist überhaupt keine praktikable Lösung. Es gibt zu viele Anwendungsfälle, die dazu führen würden, dass dies nicht funktioniert.
Erdbeere
2
@Strawberry er hat tatsächlich die Mindesthöhe (nicht die Mindestbreite) verwendet und sichergestellt, dass die angegebene Höhe geringer ist als die Mindesthöhe in der Medienabfrage. Darüber hinaus gibt er seiner Idee nur ein Beispiel, da die Medienabfrage je nach dem, was das OP erreichen möchte, sehr unterschiedlich sein kann.
Carlos Calla
12

Optional : Wenn Sie nicht möchten, dass das Modal die Fensterhöhe überschreitet und eine Bildlaufleiste im .modal-Body verwendet, können Sie diese reaktionsfähige Lösung verwenden. Eine funktionierende Demo finden Sie hier: http://codepen.io/dimbslmh/full/mKfCc/

function setModalMaxHeight(element) {
  this.$element     = $(element);
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() > 767 ? 60 : 20;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});
dimbslmh
quelle
5

Ich weiß, dass dies ein altes Thema ist, aber dies kann jemand anderem helfen.

Ich konnte den Körper scrollen lassen, indem ich die Position des Modal-Dialog-Elements festlegte. Und da ich nie die genaue Höhe des Browserfensters erfahren würde, nahm ich die Informationen, bei denen ich mir sicher war, die Höhe der Kopf- und Fußzeile. Ich konnte dann die oberen und unteren Ränder des Modalkörperelements an diese Höhen anpassen. Dies führte dann zu dem Ergebnis, das ich suchte. Ich warf eine Geige zusammen, um meine Arbeit zu zeigen.

Wenn Sie einen Vollbilddialog wünschen, deaktivieren Sie einfach die Breite: auto; im Abschnitt .modal-dialog.full-screen.

https://jsfiddle.net/lot224/znrktLej/

Und hier ist das CSS, mit dem ich den Bootstrap-Dialog geändert habe.

.modal-dialog.full-screen {
    position:fixed;
    //width:auto;  // uncomment to make the width based on the left/right attributes.
    margin:auto;                        
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.modal-dialog.full-screen .modal-content {
      position:absolute;
      left:10px;
      right:10px;
      top:10px;
      bottom:10px;
}

.modal-dialog.full-screen .modal-content .modal-header {
        height:55px;  // adjust as needed.
}

.modal-dialog.full-screen .modal-content .modal-body {
        overflow-y: auto;
          position: absolute;
          top: 0;
          bottom: 0;
        left:0;
        right:0;
          margin-top: 55px; // .modal-header height
          margin-bottom: 80px;  // .modal-footer height
}

.modal-dialog.full-screen .modal-content .modal-footer {
        height:80px;  // adjust as needed.
        position:absolute;
        bottom:0;
        left:0;
        right:0;
}
Bogus Hawtsauce
quelle
5

Oder einfacher, Sie können zuerst zwischen Ihre Tags und dann in die CSS-Klasse setzen.

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>
user7695590
quelle
1
#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

Verwenden Sie max-heightmit vhals Einheit auf dem modal-bodyoder einem Wrapper Div innerhalb des modal-body. Dadurch wird die Höhe von geändertmodal-body oder das Wrapping-Div (in diesem Beispiel) automatisch geändert, wenn ein Benutzer die Größe des Fensters ändert.

vh ist die Längeneinheit, die 1% der Ansichtsfenstergröße für die Ansichtsfensterhöhe darstellt.

Browserkompatibilitätstabelle fürvh Gerät.

Beispiel: https://jsfiddle.net/q3xwr53f/

Steven
quelle
1

Was für mich funktioniert hat, ist die Einstellung der Höhe auf 100%, wenn der Überlauf automatisch aktiviert ist. Ich hoffe, dies wird helfen

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>
njoshsn
quelle
0

Eine einfache js-Lösung, um die modale Höhe proportional zur Körpergröße einzustellen:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

Körpergröße muss 100% betragen:

html, body {
    height: 100%;
    min-height: 100%;
}

Ich habe die modale Körpergröße auf 80% des Körpers eingestellt, dies kann natürlich angepasst werden.

Ich hoffe es hilft.

migli
quelle
0

In der neuesten Bootstrap-Version gibt es eine Klasse, die den modalen Körper scrollbar macht.

.modal-dialog-scrollbar zu .modal-dialog .

Modaler Bootstrap-Link für scrollbaren Inhalt des Modalkörpers

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>
Msk Satheesh
quelle