Come mettere la barra di scorrimento solo per modal-body?


165

Ho il seguente elemento:

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

Mostra una finestra di dialogo modale simile a questa, in sostanza, mette la barra di scorrimento attorno all'intero modal-dialoge non modal-bodycontiene il contenuto che sto cercando di visualizzare.

L'immagine è simile a questa:

inserisci qui la descrizione dell'immagine

Come posso ottenere solo una barra di scorrimento modal-body?

Ho cercato di assegnare style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"a modal-body, ma non ha funzionato.


1
Si prega di fornire un campione funzionante per darvi un aiuto migliore, è possibile utilizzare bootply.com/new per farlo.
Carlos Calla,

Avanti, permettono opzionali di intestazione e piè blocchi fluidi all'interno in modo modale che solo il corpo scorre: stackoverflow.com/questions/49173969/...
leontalbot

Risposte:


298

Devi impostare heightil .modal-bodyin e dare overflow-y: auto. Ripristina anche il .modal-dialogvalore di overflow su initial.

Vedi l'esempio di lavoro:

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;
}

Grazie per questo. Funziona benissimo. Potrebbe essere qualcosa che non mi è chiaro in CSS. Ho provato ad assegnare l'altezza massima del corpo modale: 65% che non funziona. La soluzione che hai fornito funziona solo se assegno l'altezza fissa al corpo modale. Non c'è modo di dire che il dialogo modale occupa l'85% della finestra e il corpo modale dovrebbe occupare il 90% del dialogo modale? Ma ancora una volta la soluzione che mi hai fornito funziona per me. Grazie!
Subodh Nijsure,

3
@SubodhNijsure Ci scusiamo per la risposta tardiva. Non puoi impostare l'altezza in% perché ciò significherà una% del suo genitore, in questo caso il genitore è .modal-content e la sua altezza dipende dai suoi figli. Ecco perché non funzionerà se non si imposta una di queste altezze. Puoi impostare l'altezza del contenuto .modale o l'altezza del corpo .modal. Se imposti l'altezza .modal-content, allora sarai in grado di impostare l'altezza di .modal-body in% e sarà una% del suo genitore, quindi se lo imposti meno del 100% ci sarà spazio in basso, poiché non stai riempiendo tutta l'altezza di .modal-content.
Carlos Calla,

Tieni presente che la initialparola chiave CSS non funziona per Internet Explorer, sebbene funzioni per Edge.
trysis

18
solo un piccolo puntatore: invece di "altezza 250px" che potrebbe sembrare brutta su alcuni telefoni che sono solo 230px di altezza, o meno con barra di navigazione in orizzontale: basta usare l' max-height: 80vh;80% dell'altezza totale della finestra e solo per l'altezza massima, non se è un piccolo popup
Toskan,

1
funziona bene, ma dopo aver chiuso il modale, i collegamenti nella finestra 'genitore' non sono più cliccabili ... risolti con il seguente codice: .modal .modal-body {max-height: 420px; overflow-y: auto; }
cwhisperer,

119

Se stai supportando solo IE 9 o versioni successive, puoi utilizzare questo CSS che si ridimensionerà senza problemi in base alla dimensione della finestra. Tuttavia, potrebbe essere necessario modificare "200px", a seconda dell'altezza dell'intestazione o del piè di pagina.

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

Secondo [1] e [2] questo è supportato anche da Chrome, Firefox e Safari. [1] developer.mozilla.org/en-US/docs/Web/CSS/… [2] developer.mozilla.org/en-US/docs/Web/CSS/…
ctron,

Nota: questa soluzione fa apparire il popover sotto l'intestazione o il piè di pagina a seconda dell'opzione selezionata in alto o in basso Vedi questo violino che ho creato: jsfiddle.net/2qeo99k3/4 Senza l' hash css funziona benissimo basta rimuoverlo nel violino per vedere funziona
Marc Roussel il

Una soluzione alternativa per il popover è disponibile qui: stackoverflow.com/questions/45666828/…
Marc Roussel,

37

Problema risolto con la soluzione combinata @carlos calla e @jonathan marston.

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

20

Per le versioni Bootstrap> = 4.3

Bootstrap 4.3 ha aggiunto una nuova funzionalità di scorrimento integrata ai modali. Questo fa scorrere solo il contenuto del corpo modale se la dimensione del contenuto altrimenti farebbe scorrere la pagina. Per usarlo, basta aggiungere la classe modal-dialog-scrollable allo stesso div che ha la classe modal-dialog .

Ecco un esempio:

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


14

Aggiungendo alla grande risposta di Carlos Calla .

L'altezza di .modal-body deve essere impostata, MA è possibile utilizzare le query multimediali per assicurarsi che sia appropriato per le dimensioni dello schermo.

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

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

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}

Supporre che l'altezza sarà di 400 px o superiore su un dispositivo mobile è difettoso. L'uso della larghezza per determinare l'altezza non è affatto una soluzione fattibile. Ci sono troppi casi d'uso che potrebbero causare l'interruzione.
Fragola,

2
@Strawberry ha effettivamente utilizzato l'altezza minima (non la larghezza minima) e si è assicurato che l'altezza fornita sia inferiore all'altezza minima nella media query. Inoltre, sta solo dando un esempio della sua idea perché la media query può variare molto a seconda di ciò che l'OP vuole ottenere.
Carlos Calla,

12

Opzionale : Se non vuoi che il modale superi l'altezza della finestra e usi una barra di scorrimento nel corpo .modal, puoi usare questa soluzione reattiva. Guarda una demo funzionante qui: 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'));
  }
});

5

So che questo è un vecchio argomento, ma questo potrebbe aiutare qualcun altro.

Sono stato in grado di far scorrere il corpo rendendo fissa la posizione dell'elemento del dialogo modale. E dal momento che non avrei mai saputo l'altezza esatta della finestra del browser, ho preso le informazioni di cui ero sicuro, l'altezza dell'intestazione e il piè di pagina. Sono stato quindi in grado di far corrispondere i margini superiore e inferiore dell'elemento del corpo modale a quelle altezze. Questo ha quindi prodotto il risultato che stavo cercando. Ho messo insieme un violino per mostrare il mio lavoro.

inoltre, se si desidera una finestra di dialogo a schermo intero, annullare l'annullamento della larghezza: auto; all'interno della sezione .modal-dialog.full-screen.

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

Ed ecco il CSS che ho usato per modificare la finestra di dialogo bootstrap.

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

5

O più semplice puoi inserire prima tra i tuoi tag, poi nella classe css.

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>

1
#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

Usando max-heightcon vhcome unità sul modal-bodydiv o un wrapper all'interno di modal-body. Questo ridimensionerà automaticamente l'altezza modal-bodyo il div wrapping (in questo esempio) quando un utente ridimensiona la finestra.

vh è l'unità di lunghezza che rappresenta l'1% della dimensione della finestra per l'altezza della finestra.

Tabella di compatibilità del browser per l' vhunità.

Esempio: https://jsfiddle.net/q3xwr53f/


1

Quello che ha funzionato per me è impostare l'altezza al 100% avendo l'overflow su auto speranza che questo possa aiutare

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

0

Una semplice soluzione js per impostare l'altezza modale proporzionale all'altezza del corpo:

$(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>');
});

l'altezza del corpo deve essere del 100%:

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

Ho impostato l'altezza modale del corpo sull'80% del corpo, questo può ovviamente essere personalizzato.

Spero che sia d'aiuto.


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.