css - plugin - twitter title

Modalidad de desplazamiento de Twitter modal

Question

Estoy usando twitter bootstrap para un proyecto en el que estoy trabajando.

Tengo una ventana modal que tiene una forma algo más larga y no me gustó que cuando la ventana se volvió demasiado pequeña, el modal no se desplazó (si desapareció de mi página, que no es desplazable).

Para arreglar esto, utilicé el siguiente css

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

Esto funciona exactamente de la manera que quiero en Chrome (es decir, el formulario es de tamaño completo cuando la ventana es lo suficientemente grande, pero a medida que la ventana se reduce, el modal se encoge y se puede desplazar). El problema es que en IE el modal está fuera de la pantalla. ¿Alguien tiene una mejor solución para este problema?

Mi ejemplo se puede encontrar en tinyhousemap.com (haga clic en ''Agregar una entrada al mapa'' en la ventana de navegación para que aparezca el modal)

Gracias

Answer 1

¿Qué tal la siguiente solución? Funcionó para mí Prueba esto:

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

Detalles:

1. eliminar overflow-y: auto; o overflow: auto; de la clase .modal (importante)
2. eliminar max-height: 400px; de la clase .modal (importante)
3. Añadir max-height: 400px; a .modal.modal-body (o lo que sea, puede ser 420px o menos, pero no 450px )
4. Agregar overflow-y: auto; a .modal .modal-body

Hecho, solo cuerpo se desplazará.

Answer 2

El problema con la solución CSS de @ grenoult (que funciona, principalmente) es que es totalmente sensible y en el móvil cuando aparece el teclado (es decir, cuando hacen clic en una entrada en el diálogo modal) el tamaño de la pantalla cambia y el cuadro de diálogo modal Cambia el tamaño y puede ocultar la entrada en la que acaban de hacer clic para que no puedan ver lo que están escribiendo.

La mejor solución para mí fue usar jquery de la siguiente manera:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

No responde al cambio del tamaño de la ventana, pero eso no sucede a menudo de todos modos.

Answer 3

En caso de utilizar .modal {overflow-y: auto;} , se crearía una barra de desplazamiento adicional a la derecha de la página, cuando el cuerpo ya está desbordado.

La solución para esto es eliminar temporalmente el desbordamiento de la etiqueta corporal y establecer el desbordamiento modal -y en automático .

Ejemplo:

$(''.myModalSelector'').on(''show.bs.modal'', function () {

        // Store initial body overflow value
        _initial_body_overflow = $(''body'').css(''overflow'');

        // Let modal be scrollable
        $(this).css(''overflow-y'', ''auto'');
        $(''body'').css(''overflow'', ''hidden'');


    }).on(''hide.bs.modal'', function () {

        // Reverse previous initialization
        $(this).css(''overflow-y'', ''hidden'');
        $(''body'').css(''overflow'', _initial_body_overflow);
});

Answer 4

He hecho una pequeña solución usando solo jQuery.

Primero, necesitas poner una clase adicional a tu <div class="modal-body"> Llamé "ativa-scroll", así que se convierte en algo así:

<div class="modal-body ativa-scroll">

Así que ahora solo ponga este fragmento de código en su página, cerca de su carga de JS:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

¡Me funciona a la perfección, también de manera receptiva! :)

Answer 5

Intenta anular bootstrap:

 .modal {
position: fixed;

Con:

.modal {
position: absolute;

Funcionó para mí

Answer 6

Nada de esto funcionará como se espera. La forma correcta es cambiar de posición: fija a la posición: absoluta para la clase .modal

Answer 7

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. Luego configure el overflow-y en automático para que solo se desplace cuando sea necesario.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Answer 8

También agregué

.modal { position: absolute; }

a la hoja de estilo para permitir que el diálogo se desplace, pero si el usuario se ha desplazado al final de una página larga, el modal puede quedar oculto en la parte superior del área visible.

Entiendo que esto ya no es un problema en bootstrap 3, pero en busca de una solución relativamente rápida hasta que actualicemos, terminé con lo anterior y llamé a los siguientes antes de abrir el modal

$(''.modal'').css(''top'', $(document).scrollTop() + 50);

Parece feliz en Firefox, Chrome, IE10 8 y 7 (los navegadores que tenía a mano)

Answer 9

Tu modal se está ocultando en Firefox, y eso se debe a la declaración de margen negativo que tienes dentro de tu hoja de estilo general:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Elimina el margen negativo y todo funciona bien.

Answer 10

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

Esto funciona para Bootstrap 3 sin código JS y responde.

Source