Le mode de démarrage Twitter pousse le contenu HTML à gauche
Si j’ouvre une boîte de dialogue modale via Twitter Bootstrap, j’ai remarqué qu’elle poussait un peu tout le contenu html de la page (c'est-à-dire, dans la container), puis le remettait à la normale après sa fermeture. Cependant, cela ne se produit que si la largeur du navigateur est suffisamment grande pour ne pas figurer sur la requête multimédia "mobile" (c'est-à-dire la plus petite). Cela se produit avec les dernières versions de FF et de Chrome (les autres navigateurs n’ont pas été testés).
Vous pouvez voir le problème ici: http://jsfiddle.net/jxX6A/2/
Remarque: vous devez augmenter la largeur de la fenêtre "Résultat" pour qu'elle passe en "css" ou "grande" requête multimédia.
J'ai configuré le code HTML de la page en fonction des exemples présentés sur le site 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>© 2013, me</p>
</div>
</div>
Je suppose que ce n'est pas censé se produire, mais je ne suis pas sûr de ce que j'ai mal fait.
EDIT: Ceci est un bogue connu. Pour plus d'informations (et les mises à jour), veuillez consulter: https://github.com/twbs/bootstrap/issues/9855
Pour bootstrap 3.x.x.
J'ai trouvé une solution qui fonctionne avec 100% CSS sans JavaScript.
L'astuce consiste à afficher la barre de défilement pour modal 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 sous 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 fond (= corps) qui défile avec la molette de la souris, si rien de plus à faire défiler au premier plan.
Attention à position:fixed!
En raison de la nature de cette solution de contournement, vous devez prendre des précautions supplémentaires 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 le document 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;
}
alternative avec wrapper
Si vous n'aimez pas définir overflow:hidden sur html (certaines personnes ne le souhaitent pas, mais cela fonctionne, il est valide et conforme à 100% aux normes), vous pouvez envelopper le contenu de body dans un extra div.
Alors que vous n’avez pas besoin de plus de soin 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:
Mise à jour 2: FYI
Dans Bootstrap 3.2.0, ils ajoutent une solution de contournement à modal.js qui tente de gérer les problèmes liés à Javascript pour chaque appel 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 tente uniquement de gérer ces problèmes.
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 */
}
En fait, cela est 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 rendre compte de la barre de défilement en quelque sorte) mais vous pouvez changer le comportement avec ceci:
body.modal-open {margin-right: 0px}
EDIT: En fait, il s’agit d’un problème signalé dans 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 (utilisateur yshing } _ qui A CORRIG&EACUTE; pour moi tout en utilisant Bootstrap v3.1.1 et Google Chrome 35.0.1916.114m. Le correctif provient d'un GitHub sujet concernant ce sujet:
.modal
{
overflow-y: auto;
}
.modal-open
{
overflow:auto;
overflow-x:hidden;
}
Le correctif n'atterrira que dans Bootstrap 3.2 comme décrit par mdo .
Vous venez d'éditer le fichier bootstrap.min.css sous la forme d'une classe .modal-open, je pense que ça va aller .modal-open{overflow:auto}
Le débordement: masqué est défini ici, vous venez de définir le débordement: 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;
}
Pour empêcher la page de se déplacer dans des cas similaires - par exemple une ouverture en accordéon qui dépasse le bas de la page - j'ajoute ceci en 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 pas pourquoi j'ai mis height:100% dedans ... mais vous ne semblez pas en avoir besoin pour résoudre ce problème.
Démo: http://jsfiddle.net/jxX6A/8/
Il y a encore un peu de mouvement. Mais cela semble être présent sur la propre page d’exemple de Bootstrap: http://getbootstrap.com/javascript/#modals
Donc je suppose que vous êtes coincé avec ça ... mais c'est quand même bien meilleur que ce que vous voyiez au départ.
EDIT: Je crains que l’ajout de ces styles n’interfère avec d’autres logiciels Bootstrap, car je ne les ai pas utilisés moi-même. Vous voudrez peut-être vérifier.
Beaucoup de choses ont changé depuis le bootstrap 3.3.6, les solutions ci-dessus risquent donc de ne pas suffire.
Pour résoudre ce problème, regardez la fonction setScrollbar dans bootstrap.js (ou bootstrap-min.js bien entendu), vous remarquerez immédiatement que bootstrap ajoute padding-right à l'élément body en définissant sa valeur sur une valeur élaborée de scrollbarWidth plus padding existant à droite sur le corps (ou 0 sinon).
Si vous commentez le ci-dessous
//this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
Dans votre css, remplacez la classe bootstrap modal-open par la commande ci-dessous.
.modal-open{
overflow:inherit;
}
Les gens ont suggéré overflow-y: scroll; le problème avec ceci est que votre contenu change si la barre de défilement n'existe pas.
NBSelon http://getbootstrap.com/javascript/#modals , essayez toujours de placer le code HTML d'un modal au plus haut niveau dans votre document.
Il suffit de faire cela simplement et c'est tout
.modal-open {
padding-right: 0 !important;
}
Travaille pour moi. Court et fait le travail.
Aucune solution ici résolu mon problème. Mais après Css, Github m'a donné du travail.
body.modal-open {
padding-right: 0px !important;
overflow-y: auto;
}
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;
}
placez ce code en haut de votre fichier style.css
Trouvé cette réponse dans TB numéros
juste en ajoutant ceci ci-dessous css que petit mouvement sera corrigé
body, .navbar-fixed-top, .navbar-fixed-bottom {
margin-right: 0 !important;
}
Crédits à https://github.com/tvararu
J'utilise Bootstrap v3.3.4 et je vois ce problème. J'ai compris que Bootstrap modal ajoute un remplissage 17px directement dans le corps. Il suffit donc d'utiliser le code suivant:
body {
padding-right: 0 !important;
}
Ajoutez simplement une classe
.modal-open{ padding-right:0px !important;}
ça a fonctionné pour moi
Je n’aimais vraiment aucune des solutions fournies, et j’ai utilisé une combinaison de ces solutions (avec un correctif que j’avais eu précédemment pour les modaux qTip) pour proposer quelque chose qui me convienne le mieux avec Bootstrap v3.3.7.
UPDATE: Problème résolu avec le positionnement fixe de la barre de navigation 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 défilés de défiler, de résoudre le problème de la double barre de défilement et de repositionner la barre de navigation fixe.
Notez qu’il existe également un 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 tous ceux qui cherchent à atteindre mes objectifs.
Il s'agit d'un problème signalé lié à l'initialisation: https://github.com/twbs/bootstrap/issues/9855
Et ceci est ma solution rapide temporaire et son travail utilise une barre de navigation supérieure fixe, uniquement à l'aide de 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
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..
Pour ceux qui ont encore du mal avec cela - la dernière version de Bootstrap a un correctif natif. Il suffit de mettre à jour les fichiers bootstrap.min.css et bootstrap.min.js à partir de la dernière version.
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;
}
Il s’avère que j’obtiens 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 je règle la valeur de position sur la valeur par défaut comme ci-dessous:
.modal-open{ position: initial !important;}
Si toutes les solutions ci-dessus ne fonctionnent pas, cela peut être dû au positionnement du contenu
body.modal-open
{
padding-right: 0 !important; // not important
position: relative;
}