html - form - class page bootstrap
¿Cómo habilitar el contenido de desplazamiento dentro de un modal de Bootstrap? (15)
Intento incluir una gran cantidad de texto en un cuadro modal creado con Twitter Bootstrap pero tengo un problema: el contenido se niega a desplazarse. Intenté agregar overflow:scroll y overflow-y:scroll pero no sirvió; eso simplemente hace que muestre una barra de desplazamiento sin habilitar realmente el desplazamiento.
¿Cuál es la causa detrás de eso y qué puedo hacer?
Al usar Bootstrap modal con skrollr, el modal no será desplazable.
Problema solucionado con detener el evento táctil de la propagación.
$(''#modalFooter'').on(''touchstart touchmove touchend'', function(e) {
e.stopPropagation();
});
más detalles en Añadir evento de desplazamiento al elemento dentro de # skrollr-body
Así es como lo hice puramente con CSS sobreescribiendo algunas clases:
.modal {
height: 60%;
.modal-body {
height: 80%;
overflow-y: scroll;
}
}
Espero que te ayude
Bootstrap agregará o eliminará un css "modal-open" a la etiqueta <body> cuando abrimos o cerramos un modal. Entonces, si abre múltiples modos y luego cierra uno arbitrario, el css de apertura modal se eliminará de la etiqueta de cuerpo.
Pero el efecto de desplazamiento depende del atributo "overflow-y: auto;" definido en modal-open
Después de usar todas estas soluciones mencionadas, todavía no podía desplazarme con el desplazamiento del mouse, el botón de teclado arriba / abajo funcionaba para desplazar el contenido.
Así que he agregado correcciones de css por debajo para que funcione
.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
**pointer-events: auto;**
}
Se agregaron eventos de puntero: automático; para que sea desplazable por el mouse.
En Bootstrap 3 tienes que cambiar la clase css .modal
antes de:
.modal {
overflow-y: auto;
}
después:
.modal {
overflow-y: scroll;
}
En Bootstrap.css cambie el atributo de fondo ( position ) de Modal de fixed a absolute
En realidad, para Bootstrap 3 también debes anular la clase .modal-open en el cuerpo.
body.modal-open,
.modal-open
.navbar-fixed-top,
.modal-open
.navbar-fixed-bottom {
margin-right: 15px; /*<-- to margin-right: 0px;*/
}
Esta respuesta en realidad tiene dos partes, una advertencia UX y una solución real .
UX Warning
Si su modal contiene tanto que necesita desplazarse, pregúntese si debería usar un modal. El tamaño del modo de arranque predeterminado es una restricción bastante buena sobre la cantidad de información visual que debe caber. Dependiendo de lo que esté haciendo, en su lugar puede querer optar por una nueva página o un asistente.
Solución real
Está aquí: http://jsfiddle.net/ajkochanowicz/YDjsE/2/
Esta solución también le permitirá cambiar la altura de .modal y hacer que el .modal-body ocupe el espacio restante con una barra de desplazamiento vertical si es necesario.
ACTUALIZAR
Tenga en cuenta que en Bootstrap 3, el modal se ha refactorizado para manejar mejor el contenido desbordado. Podrá desplazar el modal hacia arriba y hacia abajo a medida que fluye por debajo de la ventana gráfica.
Establezca la altura para modal-body y no para todo el modal para obtener un desplazamiento perfecto en la superposición modal. Lo hago funcionar así:
.MyModal {
height: 450px;
overflow-y: auto;
}
Aquí puede configurar la altura según sus requisitos.
Pude superar esto utilizando la métrica "vh" con altura máxima en el elemento .modal-body. 70vh miró a mi alrededor para mis usos.
.modal-body {
overflow-y: auto;
max-height: 70vh;
}
Si recuerdo correctamente, la configuración de desbordamiento: oculta en el cuerpo no funcionó en todos los navegadores que estaba probando para una biblioteca modal que construí para un sitio móvil. Específicamente, tuve problemas para evitar que el cuerpo se desplazara, además del desplazamiento modal incluso cuando puse desbordamiento: oculto en el cuerpo.
Para mi sitio actual, terminé haciendo algo como esto. Básicamente, simplemente almacena su posición de desplazamiento actual además de establecer "desbordamiento" en "oculto" en el cuerpo de la página, luego restaura la posición de desplazamiento una vez que se cierra el modo. Hay una condición para cuando se abre otro modal de arranque, mientras que uno ya está activo. De lo contrario, el resto del código debería ser explicativo por sí mismo. Tenga en cuenta que si el desbordamiento: oculto en el cuerpo no impide que la ventana se desplace para un navegador determinado, al menos restablece la ubicación de desplazamiento original al salir.
function bindBootstrapModalEvents() {
var $body = $(''body''),
curPos = 0,
isOpened = false,
isOpenedTwice = false;
$body.off(''shown.bs.modal hidden.bs.modal'', ''.modal'');
$body.on(''shown.bs.modal'', ''.modal'', function () {
if (isOpened) {
isOpenedTwice = true;
} else {
isOpened = true;
curPos = $(window).scrollTop();
$body.css(''overflow'', ''hidden'');
}
});
$body.on(''hidden.bs.modal'', ''.modal'', function () {
if (!isOpenedTwice) {
$(window).scrollTop(curPos);
$body.css(''overflow'', ''visible'');
isOpened = false;
}
isOpenedTwice = false;
});
}
Si no te gusta esto, la otra opción sería asignar una altura máxima y un desbordamiento: auto a .modal-body como sigue:
.modal-body {
max-height:300px;
overflow:auto;
}
Para este caso, puede configurar la altura máxima para diferentes tamaños de pantalla y dejar el desbordamiento: automático para diferentes tamaños de pantalla. Sin embargo, debería asegurarse de que el encabezado modal, el pie de página y el cuerpo no sumen más que el tamaño de la pantalla, por lo que incluiría esa parte en sus cálculos.
Tengo este problema en Mobile Safari en mi iPhone6
Bootstrap agrega la clase .modal-open al cuerpo cuando se abre un modal.
Intenté hacer modificaciones mínimas a Bootstrap 3.2.0 y obtuve lo siguiente:
.modal-open {
position: fixed;
}
.modal {
overflow-y: auto;
}
Para comparar, he incluido los estilos de Bootstrap asociados a continuación.
Extracto seleccionado de bootstrap / less / modals.less (no incluir esto en la corrección):
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
display: none;
overflow: hidden;
position: fixed;
-webkit-overflow-scrolling: touch;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
Versión de Mobile Safari utilizada: User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4
Tuve el mismo problema y encontré una solución como la siguiente:
$(''.yourModalClassOr#ID'').on(''shown.bs.modal'', function (e) {
$('' yourModalClassOr#ID '').css("max-height", $(window).height());
$('' yourModalClassOr#ID '').css("overflow-y", "scroll"); /*Important*/
$('' yourModalClassOr#ID '').modal(''handleUpdate'');
});
100% trabajando.
Solución 1 : puede declarar .modal{ overflow-y:auto} o .modal-open .modal{ overflow-y:auto} si está utilizando debajo de 3v de bootstrap (para versiones superiores ya está declarado).
Bootstrap agrega modal-open class a body para eliminar barras de desplazamiento en caso de que se muestre modal, pero no agrega ninguna clase a html que también puede tener barras de desplazamiento, como resultado la barra de desplazamiento de html veces también puede ser visible, para eliminarlo tiene que establecer eventos modales de mostrar / ocultar y agregar / eliminar overflow:hidden en html . Aquí cómo hacer esto.
$(''.modal'').on(''hidden.bs.modal'', function () {
$(''html'').css(''overflow'',''auto'');
}).on(''shown.bs.modal'', function () {
$(''html'').css(''overflow'',''hidden'');
});
Solución 2 : Como modal tiene teclas de funcionalidad, la mejor manera de manejar esto es arreglar la altura o incluso conectar mejor la altura del modal con la altura de la ventana gráfica como esta -
.modal-body {
overflow:auto;
max-height: 65vh;
}
Con este método, tampoco es necesario manejar body barras de desplazamiento de body y html .
Nota 1 : support navegador para unidades vh .
Nota 2 : Como se propuso above . Si cambia .modal{position:fixed} a .modal{position:absolute} , pero en caso de que la página tenga más altura que el usuario modal puede desplazarse demasiado hacia arriba y el modal desaparecerá de la ventana gráfica, esto no es bueno para la experiencia del usuario.
.modal-body {
max-height: 80vh;
overflow-y: scroll;
}
me funciona