Twitter Bootstrap modal empuja el contenido html a la izquierda

8 minutos de lectura

avatar de usuario
EleventyOne

Si abro un cuadro de diálogo modal, a través de Twitter Bootstrap, noté que empuja todo el contenido html de la página (es decir, en el container) a la izquierda un poco, y luego vuelve a la normalidad después de cerrarse. Sin embargo, esto solo sucede si el ancho del navegador es lo suficientemente grande como para no estar en la consulta de medios “móvil” (es decir, la más pequeña). Esto ocurre con las últimas versiones de FF y Chrome (no he probado otros navegadores).

Puedes ver el problema aquí: http://jsfiddle.net/jxX6A/2/

Nota: Tiene que aumentar el ancho de la ventana “Resultado” para que cambie al CSS de consulta de medios “med” o “grande”.

Configuré el HTML de la página según los ejemplos que se muestran en el sitio de Bootstrap:

<div class="container">
    <div class="page-header">
        <h4>My Heading</h4>
    </div>
    <div id='content'>
        This is some content.
    </div>
    <div class="footer">
        <p>&copy; 2013, me</p>
    </div>
</div>

Supongo que esto no debería suceder, pero no estoy seguro de lo que hice mal.

EDITAR: Este es un error conocido, para obtener más información (y actualizada), consulte: https://github.com/twbs/bootstrap/issues/9855

  • ¿No es causado por la barra de desplazamiento que aparece en el lado derecho cuando abres el modal? Tendría que dar body overflow:hidden cuando abra el modal para evitar eso y overflow:inherit cuando lo cierre.

    – clima

    12/10/2013 a las 17:46


  • @clime Doh! Estoy seguro de que tienes razón acerca de por qué está sucediendo. Desafortunadamente, agregando overflow:hidden a body en CSS no parece evitarlo 🙁

    – EleventyOne

    12/10/2013 a las 17:51

  • Solución definitiva de @EleventyOne aquí: stackoverflow.com/a/23851892/114029

    – Leniel Maccaferri

    25 de mayo de 2014 a las 4:03

avatar de usuario
TLindig

Para arranque 3.xx

He encontrado una solución, que funciona con 100% CSS y sin JavaScript.

El truco es mostrar la barra de desplazamiento para modal sobre la barra de desplazamiento del contenido html.

CSS:

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

Aquí hay un ejemplo en línea: http://jsbin.com/oHiPIJi/43/

Lo probé en Windows 7 con:

  • Firefox 27.0
  • cromo 32.0.1700.107m
  • IE 11 en modo navegador 8, 9, 10, Edge (escritorio)
  • IE 11 en modo navegador 8, 9, 10, Edge (teléfono con Windows)

Un pequeño problema nuevo que encontré con IE:

IE tiene desplazamiento de fondo (=cuerpo) con la rueda del mouse, si no hay nada más para desplazarse en primer plano.

ten cuidado con position:fixed!

Debido a la naturaleza de esta solución alternativa, debe prestar especial atención a los elementos fijos. Por ejemplo, el relleno para “barra de navegación fija” debe establecerse en html y no a body (como se describe en el documento de arranque).

/* only for fixed navbar: 
* extra padding setting not on "body" (like it is described in docs), 
* but on "html" element
* the value used depends on the height of your navbar
*/
html {
  padding-top: 50px;
  padding-bottom: 50px;
}

Alternativa con envoltorio

Si no te gusta configurar overflow:hidden en html (a algunas personas no les gusta esto, pero funciona, es válido y cumple con los estándares al 100 %), puede envolver el contenido de body en un div adicional. Puede usarlo como antes usando este enfoque.

body, html {
  height: 100%;
}
.bodywrapper {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

/* extra stetting for fixed navbar, see bs3 doc
*/
body {
  padding-top: 50px;
  padding-bottom: 50px;
}

Aquí hay un ejemplo: http://jsbin.com/oHiPIJi/47/

Actualizar:

Problemas en Bootstrap:

Actualización 2: FYI

En Bootstrap 3.2.0 agregan una solución para modal.js que intenta manejar los problemas con Javascript para cada invocación de modal.prototype.show(), Modal.prototype.hide() y Modal.prototype.resize(). Agregan 7 (!) nuevos métodos para eso. Ahora, alrededor del 20% del código de modal.js trata de manejar solo ese problema.

  • El error original ha sido corregido en Bootstrap v3.2.0+ pero todavía parece suceder en ui-angular. Esta corrección de CSS funcionó para mí (usándola hasta que se actualice ui-angular).

    –Nate Barbettini

    18 de noviembre de 2014 a las 16:12


  • Lo que hice fue agregar solo .modal-open { overflow: auto !important; } y comentar algún código de arranque Modal.prototype.setScrollbar = function () { var bodyPad = parseInt((this.$body.css(‘padding-right’) || 0), 10) //if (this.bodyIsOverflowing ) this.$body.css(‘relleno a la derecha’, bodyPad + this.scrollbarWidth) }

    – danpop

    11/02/2015 a las 14:00

  • No funciona en mi caso. La solución que funcionó para mí fue body.modal-open { padding-right: 0px !important; desbordamiento-y: automático; }

    – Manjay_TBAG

    16 de abril de 2015 a las 10:27


  • @TBAG Ayuda, pero no funciona para mí… Empuja mi HTML hacia la izquierda, pero solo una vez, y no tanto como antes… Todavía lo mueve entre 5 y 10 píxeles, alguna pista sobre cómo ¿para arreglar esto?

    – Alberto MN.

    16/10/2015 a las 17:34

  • No funciona en Firefox para mí. Está arreglado ahora en los otros navegadores.

    – jugo de maracuyá

    16 de agosto de 2016 a las 11:10


avatar de usuario
Jimmy Ilenloa

Prueba esto:

body.modal-open {
    overflow: auto;
}
body.modal-open[style] {
    padding-right: 0px !important;
}

.modal::-webkit-scrollbar {
    width: 0 !important; /*removes the scrollbar but still scrollable*/
    /* reference: http://stackoverflow.com/a/26500272/2259400 */
}

  • @kashesandr Actualicé el css para eliminar la otra barra de desplazamiento. Funciona con google chrome.

    – Jimmy Ilenloa

    17 de marzo de 2016 a las 13:29

  • Solo quería decir que este también funciona para mí. Creo que la razón es que esto tiene la [style] cosa, el modal en bootstrap parece agregar class="modal-open" style="padding-right: 15px" a la etiqueta del cuerpo.

    – Kimmo Lehto

    11 mayo 2016 a las 10:36

  • cuerpo.modal-abierto[style] solucionó el problema de las tablas de datos en la página

    – Mejor Desarrollador

    21 de febrero de 2021 a las 7:06

  • en serio me ayudó en 2021

    –James Osguthorpe

    4 de marzo de 2021 a las 0:08

avatar de usuario
clima

En realidad, es causado por la siguiente regla en bootstrap.css:

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  margin-right: 15px;
}

No estoy exactamente seguro de por qué se comporta así (tal vez para tener en cuenta la barra de desplazamiento de alguna manera), pero puede cambiar el comportamiento con esto:

body.modal-open {margin-right: 0px}

EDITAR: En realidad, este es un problema informado en el arranque: https://github.com/twbs/bootstrap/issues/9855

  • Hmmm, eso es interesante. No hay ningún movimiento en la página cuando agrego eso (jsfiddle.net/jxX6A/18). Solo estoy aprendiendo bootstrap ahora, así que me pregunto si puedo cambiar eso sin que afecte (negativamente) a Bootstrap de otras maneras.

    – EleventyOne

    12/10/2013 a las 18:17


  • Gracias por encontrar ese informe de errores. Según la discusión en ese hilo, parece cambiar el margin-right La propiedad tendrá un efecto nocivo en otros aspectos de Bootstrap 🙁

    – EleventyOne

    12/10/2013 a las 18:28

  • bueno, no diría otros aspectos. Más bien, en algunos navegadores, podría causar que el contenido se mueva hacia la derecha cuando el modal está abierto :). Así que puedes elegir lo que prefieras :). Por cierto. la solución parcial debe estar en bootstrap 3.0.1. La solución completa viene en 3.0.2

    – clima

    12/10/2013 a las 18:30


  • Por cierto. Sin embargo, la otra respuesta (overflow-y:scroll en body) parece evitar ambos problemas, solo moviendo el contenido un poquito, y eso coincide con lo que ocurre en la propia página de ejemplo de bootstrap. Cajero automático, ese me parece el mejor enfoque. ¿Qué piensas?

    – EleventyOne

    12/10/2013 a las 18:31

  • No estoy seguro, como la solución a medias que usaron mi enfoque: github.com/twbs/bootstrap/commit/… así que probablemente no sea una mala idea. Pero overflow-y:scroll on body… probablemente esté bien, probaría con más navegadores y elegiría el que funcione mejor :).

    – clima

    12/10/2013 a las 18:35


Cuando se abre el modelo, un relleno de 17px a la derecha del cuerpo. El siguiente código debería resolver ese problema.

body {
padding-right: 0px !important;
}

avatar de usuario
Leniel Maccaferri

Aquí está la solución propuesta por usuario yshing esto realmente FIJADO para mí mientras uso Bootstrap v3.1.1 y Google Chrome 35.0.1916.114m. La solución proviene de un GitHub tema de tema respecto a este asunto:

.modal
{
    overflow-y: auto;
}

.modal-open
{
   overflow:auto;
   overflow-x:hidden;
}

La solución aterrizará solo en Bootstrap 3.2 como lo describió mdo.

  • Nota: Esta NO es la solución OFICIAL. La solución oficial es github.com/twbs/bootstrap/commit/…

    – cvrebert

    25 de mayo de 2014 a las 4:20

  • Desafortunadamente, esto no evita que el cuerpo muestre el antiestético acolchado derecho mientras el modal está abierto.

    –Luca Fagioli

    5 mayo 2015 a las 17:53


  • No funciona como se esperaba para mí. Sí, no hay turno. Pero tengo dos barras de desplazamiento verticales a la derecha.

    – kashesandr

    9 de julio de 2015 a las 11:06

Para evitar que la página se mueva en instancias similares, por ejemplo, una apertura de acordeón que va más allá de la parte inferior de la página, agrego esto en CSS:

body {
    overflow-y: scroll;
    height: 100%;
}

los overflow-y: scroll obliga a la barra de desplazamiento a presentar en todo momento. Para ser honesto, no puedo recordar por qué puse height:100% ahí… pero no pareces necesitarlo para este problema.

Manifestación: http://jsfiddle.net/jxX6A/8/

Todavía hay un pequeño movimiento. Pero eso parece estar presente en la propia página de ejemplo de Bootstrap: http://getbootstrap.com/javascript/#modals

Así que supongo que estás atascado con él… pero sigue siendo mucho mejor que lo que estabas viendo inicialmente.

EDITAR: Puede que me preocupe que agregar estos estilos interfiera con otras cosas de Bootstrap, ya que no lo he usado yo mismo, por lo que es posible que desee verificarlo dos veces.

  • Nota: Esta NO es la solución OFICIAL. La solución oficial es github.com/twbs/bootstrap/commit/…

    – cvrebert

    25 de mayo de 2014 a las 4:20

  • Desafortunadamente, esto no evita que el cuerpo muestre el antiestético acolchado derecho mientras el modal está abierto.

    –Luca Fagioli

    5 mayo 2015 a las 17:53


  • No funciona como se esperaba para mí. Sí, no hay turno. Pero tengo dos barras de desplazamiento verticales a la derecha.

    – kashesandr

    9 de julio de 2015 a las 11:06

avatar de usuario
altaf

Simplemente edite el archivo .modal-open class form bootstrap.min.css, creo que estará bien .modal-open{overflow:auto}

El over-flow:hidden está configurado allí, solo configura over-flow:auto.

¿Ha sido útil esta solución?