Le modal Twitter de Bootstrap pousse le contenu HTML vers la gauche

Pour bootstrap 3.xx

J’ai trouvé une solution qui fonctionne avec 100% CSS et sans JavaScript .

L’astuce est de montrer la barre de défilement modale sur la barre de défilement du contenu HTML.

CSS:

 html { overflow: hidden; height: 100%; } body { overflow: auto; height: 100%; } /* unset bs3 setting */ .modal-open { overflow: auto; } 

Voici un exemple en ligne: http://jsbin.com/oHiPIJi/43/

Je le teste sur Windows 7 avec:

• FireFox 27.0
• Chrome 32.0.1700.107 m
• IE 11 en mode navigateur 8, 9, 10, Edge (Desktop)
• IE 11 en mode navigateur 8, 9, 10, Edge (Windows Phone)

Un nouveau petit problème que je pourrais trouver avec IE:

IE a un arrière-plan (= body) qui défile avec la molette de la souris, si rien de plus ne défile au premier plan.

Attention à la position:fixed !

En raison de la nature de cette solution de contournement, vous avez besoin d’une attention particulière pour les éléments fixes. Par exemple, le remplissage de “navbar fixed” doit être défini sur html et non sur body (comment il est décrit dans bootstrap doc ).

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

alternative avec emballage

Si vous n’aimez pas définir le overflow:hidden sur html (certaines personnes ne veulent pas cela, mais cela fonctionne, est valide et 100% conforme), vous pouvez envelopper le contenu du body dans un div supplémentaire.

Que vous n’avez pas besoin de soins supplémentaires pour les éléments fixes, vous pouvez l’utiliser comme avant.

 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; } 

voici un exemple: http://jsbin.com/oHiPIJi/47/

Mettre à jour:

Problèmes dans Bootstrap:

• # 12627
• # 9855

Mise à jour 2: FYI

Dans Bootstrap 3.2.0, ils ajoutent une solution de contournement à modal.js qui essaie de gérer les problèmes avec Javascript pour chaque modal.prototype.show() de modal.prototype.show() , Modal.prototype.hide() et Modal.prototype.resize() . Ils ajoutent 7 (!) Nouvelles méthodes pour cela. Maintenant ca. 20% du code de modal.js essaye seulement de gérer ce problème.

Essaye ça:

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

Il est en réalité causé par la règle suivante dans bootstrap.css:

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

Je ne sais pas exactement pourquoi il se comporte comme ça (peut-être pour tenir compte de la barre de défilement) mais vous pouvez changer le comportement avec ceci:

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

EDIT: En fait, c’est un problème signalé dans le bootstrap: https://github.com/twbs/bootstrap/issues/9855

Lorsque le modèle s’ouvre, un rembourrage de 17px à droite du corps. Le code ci-dessous devrait résoudre ce problème.

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

Voici le correctif proposé par l’ utilisateur yshing qui l’a vraiment corrigé pour moi en utilisant Bootstrap v3.1.1 et Google Chrome 35.0.1916.114m . Le correctif vient d’un thread de problème GitHub à ce sujet:

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

Le correctif arrivera uniquement dans Bootstrap 3.2, tel que décrit par mdo .

Pour empêcher la page de se déplacer dans des instances similaires – par exemple une ouverture d’accordéon qui dépasse le bas de la page – j’ajoute ceci dans CSS:

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

Le overflow-y: scroll force la barre de défilement à se présenter à tout moment. Pour être honnête, je ne me souviens plus pourquoi j’ai mis de la height:100% là-dedans … mais vous ne semblez pas avoir besoin de ça pour ce problème.

Démo: http://jsfiddle.net/jxX6A/8/

Il y a encore un petit mouvement. Mais cela semble être présent sur la propre page d’exemple de Bootstrap: http://getbootstrap.com/javascript/#modals

Donc je suppose que tu es coincé avec ça … mais c’est quand même bien mieux que ce que tu voyais au départ.

EDIT: Je crains peut-être que l’ajout de ces styles n’interfère avec d’autres éléments Bootstrap, car je ne l’ai pas utilisé moi-même.

Il vous suffit d’éditer le fichier .modal-open class bootstrap.min.css, je pense que ça ira bien .modal-open{overflow:auto}

Le débordement: caché est défini ici, vous venez de définir le dépassement de capacité: auto.

J’ai rencontré le même problème et la solution suivante

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

Beaucoup de choses ont changé depuis le bootstrap 3.3.6, donc les solutions ci-dessus peuvent ne pas suffire.

Pour résoudre ce problème, regardez la fonction setScrollbar dans bootstrap.js (ou bootstrap-min.js bien sûr), vous remarquerez immédiatement que bootstrap ajoute un padding-right à l’élément body en définissant sa valeur sur une valeur de scrollbarWidth plus padding-right existant sur le corps (ou 0 sinon).

Si vous commentez le ci-dessous

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

Dans votre css redéfinir la classe modal-open bootstrap avec le ci-dessous

 .modal-open{ overflow:inherit; } 

Les gens ont suggéré un overflow-y: scroll; Le problème est que votre contenu change si la barre de défilement n’existe pas en premier lieu.

NB Selon les http://getbootstrap.com/javascript/#modals , essayez toujours de placer le code HTML d’un modal dans une position de premier niveau dans votre document.

J’ai trouvé cette réponse dans les problèmes de tuberculose

juste en ajoutant ce css ci-dessous que petit mouvement sera fixé

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

Crédits sur https://github.com/tvararu

J’utilise Bootstrap v3.3.4 et je vois ce problème, j’ai compris que le modal Bootstrap ajoutait 17px de remplissage directement au corps, donc utilisez simplement le code suivant:

 body { padding-right: 0 !important; } 

Aucune solution ici n’a résolu mon problème. Mais suivre Css de Github a fonctionné pour moi.

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

Il suffit de faire cela simplement et c’est tout

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

Travaille pour moi. Court et fait le travail.

Ceci est un problème signalé à bootstrap: https://github.com/twbs/bootstrap/issues/9855

Et ceci est mon correctif temporaire et il fonctionne en utilisant la barre de navigation supérieure fixe, uniquement en utilisant javascript. Chargez ce script avec votre page.

 $(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); }; 

Voici l'exemple de travail: http://jsbin.com/oHiPIJi/64

J’ai rencontré le même problème et la solution suivante fonctionne pour moi

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

Essayez de changer toutes les occurrences de ci-dessous

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

avec

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

sur votre fichier bootstrap.js.

C’est tout..

J’ai le même problème et j’ai une solution qui fonctionne pour moi ….

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

placer ce code en haut de votre fichier style.css

Ajoutez simplement une classe

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

ça a fonctionné pour moi

J’ai corrigé mon problème et je pense que cela fonctionnera pour tout le monde. Dans bootstrap.js, il y a une ligne:

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

Cela signifie que dans certains cas, Bootstrap appenda un droit de remplissage à la largeur de la barre de défilement lors de l’ouverture d’un modal. Donc, @pmanOnu était à mi-chemin, mais ne supprimez pas toute cette ligne de code mais seulement

remplacer bodyPad + this.scrollbarWidth dans bootstrap.js avec 0

pour que Bootstrap ajoute un droit de remplissage de 0px (ce qui revient à ne pas append).

Ajoutez ensuite .modal-open {overflow: initial;} à votre css personnalisé pour empêcher Bootstrap de désactiver la barre de défilement lors de l’ouverture des modaux.

Si toutes les solutions ci-dessus ne fonctionnaient pas, cela peut être dû au positionnement du contenu. Il suffit de regarder la position du modal

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

Donc, il se trouve que je devais obtenir une marge de 250px environ. Mon problème semblait être que .modal-open était en train de se mettre en position: corrigé, et c’était la cause pour une raison quelconque. Donc, dans mon cas, le correctif était similaire, mais j’ai défini la valeur de la position par défaut comme ci-dessous:

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

Pour ceux qui ont encore des difficultés avec cela, la dernière version de Bootstrap a un correctif natif. Mettez simplement à jour les fichiers bootstrap.min.css et bootstrap.min.js à partir de la dernière version.

http://getbootstrap.com/

Je n’aimais vraiment pas les solutions proposées et je les ai combinées (avec un correctif que j’avais auparavant pour les modaux qTip) pour trouver quelque chose qui me convenait le mieux avec Bootstrap v3.3.7.

MISE À JOUR: Problème résolu avec le positionnement de la barre de navigation fixe sur 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"); }) }) 

Cela permet de “fixer” l’arrière-plan tout en permettant aux modaux de défiler, de résoudre le problème de la double barre de défilement et du repositionnement de la barre de navigation fixe.

Notez qu’il existe également du code supplémentaire pour mémoriser la position de défilement (et y revenir) lorsque le modal est fermé.

J’espère que cela aidera quiconque cherche à atteindre ce que je visais.

J’ai trouvé la réponse d’Agni Pradharma travaillant pour moi; mais pas entièrement dans Chrome.

Il apparaît que la barre de défilement du document est plus large qu’une autre barre de défilement des éléments. J’ai donc modifié la fonction getScrollBarWidth.

Il vérifie tout d’abord la largeur; supprime la barre de défilement du document; compare ensuite la différence. Il se trouve également être beaucoup moins de code.

 $(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); }; 

Voici ce que j’ai utilisé, fonctionnera à 100% dans Bootstrap 3.2.0 tant que cela ne vous dérange pas de forcer les barres de défilement.

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

le meilleur moyen est de: append à BODY overflow-y: scroll

et supprimer la fonction 4 de bootstrap.js –

  checkScrollbar setScrollbar resetScrollbar measureScrollbar 

Pour moi ça marche bien comme ça

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

Pour moi, ce qui suit semble fonctionner – testé sous Firefox et Chrome sous Linux:

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

Cela a fonctionné pour moi. Remplace le remplissage 17px ajouté à droite du corps:

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

J’ai modifié cette réponse plus loin dans ce fil par TBAG

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

Avec un ajustement mineur, cela fonctionne sur le bureau, car le débordement des appareils mobiles est défini sur caché

code final

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

J’espère que cela t’aides!