74 votos

Problema desplazamiento modal Bootstrap de Twitter

Estoy tratando de encajar una gran cantidad de texto en un cuadro modal creado usando Bootstrap de Twitter pero estoy teniendo un problema: el contenido se niega a desplazarse. Probé añadiendo overflow: scroll y desbordamiento-y:scroll pero en vano; simplemente que provoca que se muestre una barra de desplazamiento sin realmente permitir desplazamiento.

¿Cuál es la causa detrás de eso y lo que se puede hacer?

63voto

jktress Puntos 666

En Bootstrap.css cambiar el atributo background (posición) de Modal de fijo absoluto

46voto

Philipp Wirth Puntos 11

En 3 manos a la obra tienes que cambiar la clase css del .modal

antes:

.modal {
    /* ... */
    overflow-y: auto;
}

después de:

.modal {
    /* ... */
    overflow-y: scroll;
}

17voto

ajkochanowicz Puntos 1763

Esta respuesta, en realidad tiene dos partes, una UX advertencia, y una solución real.

UX Advertencia

Si tu modal contiene tanto que necesita para desplazarse, pregúntese si usted debe utilizar un modal. El tamaño de los archivos de inicio modal, por defecto, es un muy buen restricción sobre cómo mucha información visual debe encajar. Dependiendo de lo que estás haciendo, puede que desee 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 permite cambiar la altura de .modal e tienen .modal-body ocupan el espacio restante con una barra de desplazamiento vertical si es necesario.

ACTUALIZACIÓN

Tenga en cuenta que en Bootstrap 3, el modal ha sido reestructurada para manejar mejor el desborde de los contenidos. Usted será capaz de desplazarse por el modal de sí mismo hacia arriba y hacia abajo a medida que fluye debajo de la ventanilla.

2voto

Alejandro Iglesias Puntos 7779

Esto es como lo hice exclusivamente con CSS reemplazar algunas clases:

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

Espero que le ayuda.

1voto

Jmorvan Puntos 404

Realmente manos a la obra 3 también necesita reemplazar la clase .modal abierta en el cuerpo.

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X