Chaque fois que j'ouvre et ferme une Bootstrap fenêtre modale , ma Bootstrap navbar se déplace sur le côté. Comment éviter que cela ne se produise, ou est-il possible de réinitialiser la navbar aux dimensions correctes une fois le modal fermé?
J'ai créé un éditeur Try-it illustrant le problème ici . Ouvrez et fermez simplement le Modal , et regardez le côté droit de la navbar.
Et, si vous n'aimez pas le éditeur d'essai , un exemple html est ci-dessous:
<head>
<title>Side Issue Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 200px;">
<nav class="navbar fixed-top navbar-expand navbar-dark" style="background-color: #ff5733; padding:0;">
<div class="collapse navbar-collapse flex-column">
<div style="width:100%;">
<table class="tableOne">
<tr>
<td class="tdOne"><span class="textOne"><img src="https://purrli.com/Pix/Logo_white_small.png"></span></td>
<td><span class="textOne"> Side Issue Example</span></td>
<td>
<table class="tableTwo">
<tr>
<td class="tdTwo"><a href="#" class="linkOne">Sign Out</a> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="firstDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color:white;">First</span></a>
<div class="dropdown-menu" aria-labelledby="firstDrop">
<a class="dropdown-item" href="/One">One</a>
<a class="dropdown-item" href="/Two">Two</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="secondDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color:white;">Second</span></a>
<div class="dropdown-menu" aria-labelledby="secondDrop">
<a class="dropdown-item" href="/One">One</a>
<a class="dropdown-item" href="/Two">Two</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/Other"><span style="color:white;">Link</span></a>
</li>
</ul>
</div>
</nav>
<center>
Here is some page content.
<br/><br/>
<a href="#" onclick="javascript:openModal()">Open Modal!</a>
</center>
<div id="modalPop" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" style="overflow-y: initial;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span>MODAL</span></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="max-height: calc(100vh - 200px); overflow-y: auto;">
This is a modal window.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
.tableOne {
padding: 2px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
height: 35px;
background-color: #0099cc;
color: white;
font-weight: bold;
font-size: 40px;
text-indent: 20px;
}
.tableTwo {
padding: 2px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
text-align: right;
width: 100%;
}
.tdOne {
text-indent: 8px;
width: 130px;
}
.tdTwo {
text-indent: 20px;
padding-bottom: 8px;
text-align: right;
color:white;
font-weight:bold;
font-style: normal;
font-size:35%;
}
.textOne {
color: white;
font-size: 28px;
font-weight: normal;
}
.linkOne {
color:white;
text-decoration: none;
font-size:12px;
}
function openModal() {
$("#modalPop").modal("show");
}
4 Réponses :
lorsque vous ouvrez le modal et que vous le fermez, il définit la classe de navigation padding-right à 16px juste défini sur padding: 0px! important ou padding-right: 0px! important est pour donc bootstrap ne remplacera pas ce style
pouvez-vous faire fonctionner cela dans l'éditeur try-it que j'ai lié? Quand je change le haut en
Pour une raison quelconque, lorsque le modal se cache, .navbar obtient de nouvelles valeurs de remplissage qui provoquent le décalage de la barre de navigation.
Une façon de résoudre ce problème serait d'ajouter hidden.bs.modal écouteur d'événement lorsque le modal est fermé et définissant le remplissage par défaut pour qu'il ne se décale pas:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Side Issue Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script>
function openModal() {
$("#modalPop").modal("show");
}
$(function() {
$('#modalPop').on('hidden.bs.modal', function (e) {
$('nav.navbar').attr('style', 'background-color: #ff5733;padding:0;');
})
});
</script>
<style>
.tableOne {
padding: 2px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
height: 35px;
background-color: #0099cc;
color: white;
font-weight: bold;
font-size: 40px;
text-indent: 20px;
}
.tableTwo {
padding: 2px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
text-align: right;
width: 100%;
}
.tdOne {
text-indent: 8px;
width: 130px;
}
.tdTwo {
text-indent: 20px;
padding-bottom: 8px;
text-align: right;
color:white;
font-weight:bold;
font-style: normal;
font-size:35%;
}
.textOne {
color: white;
font-size: 28px;
font-weight: normal;
}
.linkOne {
color:white;
text-decoration: none;
font-size:12px;
}
</style>
</head>
<body style="padding-top: 200px;">
<nav class="navbar fixed-top navbar-expand navbar-dark" style="background-color: #ff5733; padding:0;">
<div class="collapse navbar-collapse flex-column">
<div style="width:100%;">
<table class="tableOne">
<tr>
<td class="tdOne"><span class="textOne"><img src="https://purrli.com/Pix/Logo_white_small.png"></span></td>
<td><span class="textOne"> Side Issue Example</span></td>
<td>
<table class="tableTwo">
<tr>
<td class="tdTwo"><a href="#" class="linkOne">Sign Out</a> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="firstDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color:white;">First</span></a>
<div class="dropdown-menu" aria-labelledby="firstDrop">
<a class="dropdown-item" href="/One">One</a>
<a class="dropdown-item" href="/Two">Two</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="secondDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color:white;">Second</span></a>
<div class="dropdown-menu" aria-labelledby="secondDrop">
<a class="dropdown-item" href="/One">One</a>
<a class="dropdown-item" href="/Two">Two</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/Other"><span style="color:white;">Link</span></a>
</li>
</ul>
</div>
</nav>
<center>
Here is some page content.
<br/><br/>
<a href="#" onclick="javascript:openModal()">Open Modal!</a>
</center>
<div id="modalPop" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" style="overflow-y: initial;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span>MODAL</span></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="max-height: calc(100vh - 200px); overflow-y: auto;">
This is a modal window.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Exemple ci-dessous:
<script>
function openModal() {
$("#modalPop").modal("show");
}
$(function() { //we have to wait for the DOM to be ready otherwise it won't work
$('#modalPop').on('hidden.bs.modal', function (e) { //listen to the modal closed event
$('nav.navbar').attr('style', 'background-color: #ff5733;padding:0;'); //set the default background-color and padding to prevent the shifting phenomenon
})
});
Merci, c'est presque exactement ce que je viens de travailler il y a un instant. J'ai ajouté ce qui suit à mes js: function fixIt () {$ ('. Navbar'). Css ('padding', 0);}; Et puis j'ai ajouté un appel à l'écoute de hidden .bs.modal comme vous l'avez dit, qui a appelé cette méthode: $ (function () {$ ("#modalPop") .on ('hidden.bs.modal', function () {fixIt ( );});}); Et ça a marché! Le seul autre changement que j'ai dû faire était que, parce que dans la version réelle, je fais les modaux de manière dynamique, je devais l'ajouter partout où je faisais un nouveau modal.
Je vous en prie! Si vous devez prendre en charge plusieurs modaux, je vous suggère d'ajouter une classe spécifique à chacun de vos modaux (par exemple: fixShift ), puis de changer simplement le sélecteur pour qu'il corresponde à cette classe $ ('. fixShift ') en suivant l'écouteur d'événement hidden.bs.modal afin que vous n'ayez pas à créer le même écouteur d'événement pour tous vos modaux.
cela fonctionne pour moi, il suffit d'appliquer un accessoire sticke, pas de correction
header {
position: sticky;
top: 0;
}
Remplacer le style ajouté avec JS dans css:
body.modal-open {
padding-right: 0px !important;
}
.navbar {
padding-right: 16px !important;
}
Par défaut lors de l'ouverture de modal, Bootstrap masque la barre de défilement. Ce padding-right est ajouté pour corriger le déplacement vers la droite lors de la suppression. Si vous personnalisez votre barre de défilement, vous modifierez ce comportement par défaut, puis ce correctif de bootstrap sera transformé par un petit mouvement vers la gauche.
Pour les personnes qui n'ont jamais vu ! Important dans les règles css c'est important pour ce remplacement.