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 il dialogo modale qualcosa come questo, fondamentalmente, mette la barra di scorrimento intorno all'intero modal-dialog
e non il modal-body
che contiene il contenuto che sto cercando di visualizzare.
L'immagine ha un aspetto simile a questo:
Come posso ottenere una barra di scorrimento solo intorno a modal-body
?
Ho provato ad assegnare style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"
a modal-body
ma non funziona.
Devi impostare la height
del .modal-body
e dargli overflow-y: auto
. Ripristina anche il valore di overflow di .modal-dialog
a 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;
}
Se stai supportando solo IE 9 o superiore, puoi usare questo CSS che scalerà dolcemente alle dimensioni della finestra. Potresti aver bisogno di modificare i "200px" però, a seconda dell'altezza del tuo header o footer.
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}
Aggiungendo a Carlos Calla'ottima risposta.
L'altezza di .modal-body deve essere impostata, MA puoi usare le media queries per assicurarti che sia appropriata alla dimensione 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; }
}