css - ventana - Cómo poner la barra de desplazamiento solo para el cuerpo modal en el cuadro de diálogo modal de arranque
ventana modal css responsive (9)
Tengo el siguiente 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>
Muestra un cuadro de diálogo modal como este, básicamente pone la barra de desplazamiento alrededor de todo el diálogo modal y no el cuerpo modal que contiene el contenido que estoy tratando de mostrar.
La imagen se ve así: http://imgur.com/0ZZRjnJ
¿Cómo obtengo la barra de desplazamiento solo alrededor del cuerpo modal? He intentado asignar style = "overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;" a modal-body y eso no funcionó.
Agregando a la gran respuesta de Carlos Calla .
La altura de .modal-body debe establecerse, PERO puede usar las consultas de medios para asegurarse de que sea adecuada para el tamaño de la pantalla.
.modal-body{
height: 250px;
overflow-y: auto;
}
@media (min-height: 500px) {
.modal-body { height: 400px; }
}
@media (min-height: 800px) {
.modal-body { height: 600px; }
}
O más simple, puedes poner tus etiquetas primero, luego en la clase css.
<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>
Problema resuelto con la solución de combinación @carlos calla y @jonathan marston.
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}
Sé que este es un tema antiguo, pero esto puede ayudar a otra persona.
Pude hacer que el cuerpo se desplazara haciendo que la posición del elemento de diálogo modal sea fija. Y como nunca sabría la altura exacta de la ventana del navegador, tomé la información de la que estaba seguro, la altura del encabezado y el pie de página. Pude hacer que los márgenes superior e inferior del elemento modal coincidieran con esas alturas. Esto luego produjo el resultado que estaba buscando. Lancé un violín para mostrar mi trabajo.
Además, si desea un cuadro de diálogo de pantalla completa, simplemente desactive el ancho: automático; dentro de la sección .modal-dialog.full-screen.
https://jsfiddle.net/lot224/znrktLej/
Y aquí está el CSS que utilicé para modificar el diálogo de arranque.
.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;
}
Si solo admite IE 9 o superior, puede usar este CSS que se escalará sin problemas al tamaño de la ventana. Sin embargo, es posible que deba modificar el "200px", dependiendo de la altura de su encabezado o pie de página.
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}
Tienes que establecer la height del .modal-body y darle overflow-y: auto . Restablezca también el valor de desbordamiento de .modal-dialog en initial .
Ver la muestra de trabajo:
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;
}
Una solución simple de js para establecer la altura modal proporcional a la altura del cuerpo:
$(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>'');
});
la altura del cuerpo debe ser del 100%:
html, body {
height: 100%;
min-height: 100%;
}
Establecí la altura del cuerpo modal en 80% del cuerpo, esto puede ser, por supuesto, personalizado.
Espero eso ayude.
Opcional : si no desea que el modal exceda el alto de la ventana y use una barra de desplazamiento en .modal-body, puede usar esta solución receptiva. Vea una demostración en funcionamiento aquí: 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''));
}
});
#scroll-wrap {
max-height: 50vh;
overflow-y: auto;
}
Usar max-height con vh como la unidad en el modal-body o una envoltura div dentro del modal-body . Esto cambiará el tamaño de la altura del modal-body o del div de envoltura (en este ejemplo) automáticamente cuando un usuario cambia el tamaño de la ventana.
vh es la unidad de longitud que representa el 1% del tamaño de la ventana gráfica para la altura de la ventana gráfica.
Tabla de compatibilidad del navegador para la unidad vh .
Ejemplo: https://jsfiddle.net/q3xwr53f/