Twitter Bootstrap modal empuja contenido html a la izquierda

Si abro un diálogo modal, a través de Twitter Bootstrap, he notado que empuja todo el contenido html de la página (es decir, en el container ) hacia la izquierda un poco, y luego lo 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).

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

Nota: debe boost el ancho de la ventana “Resultado” para que cambie a la consulta de medios “med” o “large” css.

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

 
This is some content.

Supongo que esto no se supone que suceda, pero no estoy seguro de lo que he hecho mal.

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

Para bootstrap 3.xx

He encontrado una solución que funciona con 100% de 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 pruebo en Windows 7 con:

  • FireFox 27.0
  • Cromo 32.0.1700.107 m
  • IE 11 en modo de navegador 8, 9, 10, Edge (Escritorio)
  • IE 11 en el modo de navegador 8, 9, 10, Edge (Windows Phone)

Un pequeño pequeño problema que pude encontrar con IE:

IE tiene fondo (= cuerpo) que se desplaza con la rueda del mouse, si no hay nada más que desplazarse en el primer plano.

Cuidado con la position:fixed !

Debido a la naturaleza de esta solución, necesita cuidado adicional para los elementos fijos. Por ejemplo, el relleno para “barra de navegación fija” debe configurarse en html y no en el body (cómo se describe en el documento bootstrap ).

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

alternativa con envoltura

Si no te gusta el overflow:hidden conjuntos overflow:hidden en html (algunas personas no quieren esto, pero funciona, es válido y cumple con el estándar 100%), puedes envolver el contenido del body en un div adicional.

De lo que no necesita cuidado adicional para los elementos fijos, puede usarlo como antes.

 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:

  • # 12627
  • # 9855

Actualización 2: FYI

En Bootstrap 3.2.0 agregan una solución a modal.js que intenta manejar los problemas con Javascript para cada invocación de modal.prototype.show() , Modal.prototype.hide() y Modal.prototype.resize() . Añaden 7 (!) Nuevos métodos para eso. Ahora ca. El 20% del código de modal.js solo trata de manejar esos problemas.

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 */ } 

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 de esa manera (quizás para dar cuenta de alguna manera de la barra de desplazamiento) pero puede cambiar el comportamiento con esto:

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

EDIT: En realidad, este es un problema reportado en bootstrap: https://github.com/twbs/bootstrap/issues/9855

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

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

Aquí está el arreglo propuesto por el usuario yshing que realmente lo v3.1.1 mientras utilizaba Bootstrap v3.1.1 y Google Chrome 35.0.1916.114m . La solución proviene de un tema de GitHub relacionado con este asunto:

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

La solución aterrizará solo en Bootstrap 3.2 como se describe en mdo .

Para evitar que la página se desplace en casos similares, por ejemplo, una abertura 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%; } 

El overflow-y: scroll obliga a la barra de desplazamiento a presentarse en todo momento. Para ser honesto, no puedo recordar por qué puse la height:100% allí … pero parece que no lo necesita para este problema.

Demostració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 te quedas con eso … pero aún es mucho mejor que lo que estabas viendo inicialmente.

EDITAR: Es posible que me preocupe que agregar estos estilos pueda interferir con otras cosas de Bootstrap, ya que no lo he usado yo mismo, por lo que es posible que desee verificarlo.

Simplemente edita el archivo bootstrap.min.css de la clase de forma abierta de la clase, entiendo que estará bien. .modal-open{overflow:auto}

El exceso de flujo: oculto se establece allí, solo se configura el exceso de flujo: automático.

He enfrentado el mismo problema y siguiendo la solución

 .modal-open { overflow: visible; } .modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { padding-right:0px!important; } 

Mucho ha cambiado desde bootstrap 3.3.6, por lo que las soluciones anteriores pueden no ser suficientes.

Para resolver esto, mire la función setScrollbar en bootstrap.js (o bootstrap-min.js, por supuesto), inmediatamente notará que bootstrap está agregando relleno al elemento del cuerpo, estableciendo su valor en un valor resuelto de scrollbarWidth plus Relleno existente-derecho en el cuerpo (o 0 si no).

Si comentas lo siguiente

 //this.$body.css('padding-right', bodyPad + this.scrollbarWidth) 

En su css anule la clase modal-open bootstrap con el siguiente

 .modal-open{ overflow:inherit; } 

La gente ha sugerido overflow-y: scroll; El problema con esto es que su contenido cambia si la barra de desplazamiento no existe en primer lugar.

NB Según http://getbootstrap.com/javascript/#modals , siempre intente colocar un código HTML modal en una posición de nivel superior en su documento

Encontré esta respuesta en problemas de TB

Simplemente agregando esto debajo de css ese pequeño movimiento será arreglado

 body, .navbar-fixed-top, .navbar-fixed-bottom { margin-right: 0 !important; } 

Créditos a https://github.com/tvararu

Utilizo Bootstrap v3.3.4 y veo este problema, entendí que Bootstrap modal agrega 17px padding directamente al cuerpo, así que simplemente use el siguiente código:

 body { padding-right: 0 !important; } 

Ninguna solución aquí solucionó mi problema. Pero después de Css obtuve de Github trabajó para mí.

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

Solo haz esto simplemente y eso es todo

 .modal-open { padding-right: 0 !important; } 

Funciona para mi. Corto y hace el trabajo.

Este es un problema reportado para bootstrap: https://github.com/twbs/bootstrap/issues/9855

Y esta es mi solución rápida temporal y funciona con la barra de navegación superior fija, solo con javascript. Cargue este script junto con su página.

 $(document.body) .on('show.bs.modal', function () { if (this.clientHeight <= window.innerHeight) { return; } // Get scrollbar width var scrollbarWidth = getScrollBarWidth() if (scrollbarWidth) { $(document.body).css('padding-right', scrollbarWidth); $('.navbar-fixed-top').css('padding-right', scrollbarWidth); } }) .on('hidden.bs.modal', function () { $(document.body).css('padding-right', 0); $('.navbar-fixed-top').css('padding-right', 0); }); function getScrollBarWidth () { var inner = document.createElement('p'); inner.style.width = "100%"; inner.style.height = "200px"; var outer = document.createElement('div'); outer.style.position = "absolute"; outer.style.top = "0px"; outer.style.left = "0px"; outer.style.visibility = "hidden"; outer.style.width = "200px"; outer.style.height = "150px"; outer.style.overflow = "hidden"; outer.appendChild (inner); document.body.appendChild (outer); var w1 = inner.offsetWidth; outer.style.overflow = 'scroll'; var w2 = inner.offsetWidth; if (w1 == w2) w2 = outer.clientWidth; document.body.removeChild (outer); return (w1 - w2); }; 

Aquí está el ejemplo de trabajo: http://jsbin.com/oHiPIJi/64

Me he enfrentado con el mismo problema y la siguiente solución me funciona

 .modal-open { overflow: visible; } .modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { padding-right:0px!important; } 

Trate de cambiar toda la ocurrencia de abajo

 $body.css('padding-right',XXX) 

con

 $body.css('padding-right'0) 

en su archivo bootstrap.js.

Eso es todo..

Tengo el mismo problema y tengo una solución que me funciona …

 body .modal-open { padding-right: 0% !important; overflow-y: auto; } 

coloque este código en la parte superior de su archivo style.css

Simplemente agrega una clase

 .modal-open{ padding-right:0px !important;} 

funciono para mi

Arreglé mi problema y creo que funcionará para todos. En bootstrap.js hay una línea:

if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)

Significa que, en algún caso, Bootstrap agregará un relleno a la derecha del ancho de la barra de desplazamiento al abrir un modal. Así que @pmanOnu estaba a mitad de camino correcto, pero no borres toda esta línea de código sino solo

Reemplace bodyPad + this.scrollbarWidth en bootstrap.js con 0

para hacer que Bootstrap agregue un derecho de relleno de 0px (que es lo mismo que no agregar).

Luego agregue .modal-open {overflow: initial;} a su css personalizado para evitar que Bootstrap deshabilite la barra de desplazamiento al abrir los modales.

Si todas las soluciones anteriores no funcionaron, puede deberse a la ubicación del contenido. Solo observe la posición del modal.

 body.modal-open { padding-right: 0 !important; // not important position: relative; } 

Así que resulta que en realidad estaba obteniendo un margen derecho de 250px o menos. Mi problema parecía ser que .modal-open estaba siendo puesto en posición: arreglado, y esa fue la causa por cualquier razón. Entonces, en mi caso, la solución fue similar, pero establecí el valor de posición en el valor predeterminado de la siguiente manera:

 .modal-open{ position: initial !important;} 

Para cualquier persona que todavía tenga problemas con esto, la última versión de Bootstrap tiene una solución nativa. Solo actualice los archivos bootstrap.min.css y bootstrap.min.js de la última versión.

http://getbootstrap.com/

Realmente no me gustó ninguna de las soluciones provistas, y utilicé una combinación de ellas (junto con una solución que tenía anteriormente para los modos qTip) para encontrar algo que funcionara mejor para mí con Bootstrap v3.3.7.

ACTUALIZACIÓN: Se resolvió el problema con el posicionamiento de barra de navegación fija en iOS.

CSS:

 /* fix issue with scrollbars and navbar fixed movement issue with bootstrap modals */ html { overflow-y: scroll !important; } html.noscroll { position: fixed; width: 100%; top:0; left: 0; height: 100%; overflow-y: scroll !important; } .modal-open .modal { padding-right: 0 !important; } .modal-open[style] { padding-right: 0px !important; } .modal::-webkit-scrollbar { width: 0 !important; /*removes the scrollbar but still scrollable*/ } /* end modal fix */ 

JavaScript:

 /* fix for modal overlay scrollbar issue */ $(document).ready(function() { var curScrollTop; var prevScrollTop; $('.modal').on('show.bs.modal', function() { curScrollTop = $(window).scrollTop(); $('html').addClass('noscroll').css('top', '-' + curScrollTop + 'px'); $('.navbar-fixed-top').css({'position':'absolute','top':curScrollTop}); $(window).on("resize", function() { var bodyH = $("body").height(); var winH = $(window).height(); if (winH > bodyH) { prevScrollTop = curScrollTop; curScrollTop = 0; $('.navbar-fixed-top').css({'position':'absolute','top':'0'}); } else { $('html').removeClass("noscroll"); if (curScrollTop == 0) window.scrollTo(0, prevScrollTop); else window.scrollTo(0, curScrollTop); curScrollTop = $(window).scrollTop(); $('.navbar-fixed-top').css({'position':'absolute','top':curScrollTop}); $('html').addClass("noscroll"); } $('html').css('top', '-' + curScrollTop + 'px'); }) }) $('.modal').on('hide.bs.modal', function() { $('html').removeClass("noscroll"); $('.navbar-fixed-top').css({'position':'fixed','top':'0'}); window.scrollTo(0, curScrollTop); $(window).off("resize"); }) }) 

Esto permite que el fondo se “arregle” y que aún así los modales se puedan desplazar, resuelve el problema de la doble barra de desplazamiento y el reposicionamiento de la barra de navegación fija.

Tenga en cuenta que también hay un código adicional para recordar la posición de ‘desplazamiento’ (y volver a ella) cuando se cierre el modal.

Espero que esto ayude a cualquiera que busque alcanzar lo que buscaba.

Encontré la respuesta de Agni Pradharma trabajando para mí; Sin embargo, no totalmente en Chrome.

Parece que la barra de desplazamiento del documento es más ancha que otra barra de desplazamiento de elementos; Así que edité la función getScrollBarWidth.

Simplemente primero verifica el ancho; elimina la barra de desplazamiento del documento; luego compara la diferencia. También pasa a ser mucho menos código.

 $(document.body) .on('show.bs.modal', function () { if (this.clientHeight <= window.innerHeight) { return; } // Get scrollbar width var scrollbarWidth = getScrollBarWidth() if (scrollbarWidth) { $(document.body).css('padding-right', scrollbarWidth); $('.navbar-fixed-top').css('padding-right', scrollbarWidth); } }) .on('hidden.bs.modal', function () { $(document.body).css('padding-right', 0); $('.navbar-fixed-top').css('padding-right', 0); }); function getScrollBarWidth () { var fwidth = $(document).width(); $('html').css('overflow-y', 'hidden'); var swidth = $(document).width(); $("html").css("overflow-y", "visible"); return (swidth - fwidth); }; 

Esto es lo que usé, funcionará al 100% en Bootstrap 3.2.0 siempre y cuando no te importe forzar barras de desplazamiento.

 .modal-open .modal { overflow-x: hidden; overflow-y: scroll; } 

la mejor manera es: agregar a BODY overflow-y: scroll

y eliminar la función 4 de bootstrap.js –

  checkScrollbar setScrollbar resetScrollbar measureScrollbar 

Para mi funciona bien así

  .modal-open .modal { overflow-x: scroll; overflow-y: scroll; } 

Para mí, lo siguiente parece funcionar, probado en Firefox y Chrome en Linux:

 body.modal-open { overflow: inherit; padding-right: inherit !important; } 

Esto funcionó para mí. Anula el relleno de 17px agregado a la derecha del cuerpo:

 body.modal-open { padding-right: inherit !important; } 

Ajusté esta respuesta más arriba en este hilo por TBAG

body.modal-open {padding-right: 0px! important; desbordamiento-y: auto; }

Con un pequeño ajuste, funciona en el escritorio, ya que el desbordamiento de dispositivos móviles está configurado como oculto

código final

 body.modal-open { padding-left: 16px!important; overflow-y: auto; } 

¡Espero que esto ayude!