Decalage lorsqu'une fenêtre modales est ouverte

**dhillig** · 15/01/2022, 12h04

Bonjour à tous,
J'ai une page où les réseaux sociaux et l'appel à un formulaire (enveloppe) se trouvaient dans la navbar :
http://lapagetest.fr
mais voilà, depuis que je les ai changés de place et mis dans le footer, un décalage se crée lors de l'ouverture de la modale :
http://lapagetest.decalage/decalage.html
Je ne sais que publier comme CSS étant donné qu'entre les deux versions, rien a changé à ce niveau là.
Quelqu'un aurait-il une idée du problème ?
Merci et bon week-end,
DH

**NoSmoking** · 16/01/2022, 11h12

Bonjour,
~~rien testé, l'accès à ta page principale étant une catastrophe, certes j'ai un réseau asthmatique mais quand même, sorry~~

[Edit] PB réseau visiblement réglé, pour combien de temps ????

Regarde à supprimer la largeur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
body, html {
    font-weight: 300;
    padding: 0;
    margin: 0;
/*    width: 100vw;    /*-- A SUPPRIMER --*/
    height: 100%;
    overflow: visible;
}

**dhillig** · 16/01/2022, 12h16

Bonjour NoSmoking et MERCI pour ta réponse.
Supprimer le width ne change rien

Entre les deux versions, les CSS ont été inchangées

C'est vraiment en passant de la navbar au footer que cela a créé un décalage

Merci pour ton aide,
DH

**NoSmoking** · 17/01/2022, 16h40

Envoyé par dhillig

Supprimer le width ne change rien

Entre les deux versions, les CSS ont été inchangées

Ben non que nenni !!!!

lapagetest.fr, dans le fichier style.css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
body, html {
  font-weight: 300;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100%;
  overflow: visible;
}

lapagetest.fr/decalage/decalage.html, dans le fichier style.css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
body, html {
  font-weight: 300;
  padding: 0;
  margin: 0;
  max-width: 100vw;
  height: 100%;
  overflow: visible;
  font-size: 100%;
  padding: 0;
  margin: 0;
  background-color:black;
}

Pour info, lorsqu'un élément est de type block inutile de lui affecter une width:100% c'est le comportement par défaut sans les inconvénients.

**dhillig** · 17/01/2022, 16h57

Bonjour NoSmoking,
Merci pour l'info

Bon, j'en suis au même stade

Effectivement, quelques CSS ont changées entre les deux versions

Mais rien sur la modale...
Le problème est ailleurs

Merci Encore,
DH

**NoSmoking** · 17/01/2022, 17h38

Effectivement, quelques CSS ont changées entre les deux versions

Difficile de te suivre; il te faut plus de rigueur et dans ton code et dans tes explications

Mais rien sur la modale...
Le problème est ailleurs

Il n'y a pas de soucis avec la structure que tu utilises, c'est le comportement normal, la barre de scroll n'appartient pas à la page donc ta modale recouvre ce qu'il y a à recouvrir.

Si tu veux que la totalité du viewport soit recouvert il ne te faut pas avoir de barre de scroll sur le <body>, change la structure.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<body>
  <main>
  <!-- toute ta page ici -->
 </main>
</body>

avec le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
body {
  overflow: hidden;
  max-height: 100vh;
}
main {
  overflow: auto;
/*  max-height: 100vh;  /*-- ne sert pas à grand chose --*/
  height: 100vh;
}

la barre de scroll sera sur l'élément <main> et dans ce cas tu pourras recouvrir la page jusqu'au bord.

[EDIT] copier coller foireux mal corrigé !!!

**dhillig** · 17/01/2022, 18h15

J'ai tout fais comme tu m'as dit, je me retrouve avec deux scrollbars

Le menu shrink ne fonctionne plus (scroll + diminution du logo)

Ton diaporama n'est plus scrollable avec la molette APRES le diaporama.
Je me retrouve avec deux scrollbars APRES le diaporama.
Passé le diaporama, je peux scroller (avec la molette).
Par contre... je n'ai plus de décalage

Désolé pour les répétitions, mais je tente d'être clair

Merci BEAUCOUP NoSmoking,
DH

**NoSmoking** · 18/01/2022, 07h02

toutes mes confuses, j'ai fait un copier coller foireux que j'ai mal corrigé !!!

Code mis à jour, c'est height et non min-height sur l'élément <main> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
body {
  overflow: hidden;
  max-height: 100vh; /*-- pas forcément utile --*/
}
main {
  overflow: auto;
  height: 100vh;
}

**dhillig** · 18/01/2022, 11h00

Bonjour NoSmoking,
Ça ne change rien

Je n'ai pas remarqué hier mais il y a même le btn_up qui n'apparaît plus

je ne sais plus quoi faire

Bonne journée,
DH

**NoSmoking** · 18/01/2022, 18h17

Ça ne change rien

Est-ce que tu as un lien fiable à jour ?

Je n'ai pas remarqué hier mais il y a même le btn_up qui n'apparaît plus

... !!! ...

**dhillig** · 18/01/2022, 18h37

Le lien du jour

http://lapagetest.fr/
Merci BEAUCOUP. bonne soirée !
DH

**NoSmoking** · 19/01/2022, 11h30

Quelques remarques ...

Point #1 :
Un premier point lié à l’utilisation de BootStrap et pour lequel il est impératif de respecter la construction préconisée.

↪ Grid system

Il faut que tes éléments class="row" deviennent des éléments class="container row" afin que les marges appliquées aux éléments class="row" n’aient pas d’influence sur la largeur de la page ce qui occasionnent l’apparition de la scrollbar horizontale.

Cela devrait également régler le souci du <footer> qui se déplace lors de l’apparition/disparition de la boîte modale.

Point #2 :
BootStrap, concernant les boîtes modales, gère le recouvrement de la scrollbar verticale du <body> en ajoutant une classe modal-open et surtout un padding-right si nécessaire à celui-ci

Inutile donc de faire une « bidouille » de plus comme je te l’ai indiqué, supprime donc les éléments <main>, pas forcément bien placés d’ailleurs, et les modifications précédentes pour t’en remettre exclusivement à BootStrap.

Point #3 :
Ce point concerne ton élément <div id="btn_to_top">, qui étant en position: fixed, se déplace à l’apparition/disparition de la boîte modale.

Si tu souhaites qu’il reste en place il te faut modifier sa position right lorsque la boîte modale est affichée.
En ajoutant le CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body.modal-open #btn_to_top {
  right: 37px;
}

Je rappelles que la classe .modal-open est rajoutée par BootStrap.

Cela permettra de le laisser en place par rapport à son right: 20px initial.

Il te faut également modifier sa transition pour ne pas qu'elle affecte ce déplacement en remplaçant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 transition: all 0.3s;

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 transition: font-size .3s, color .3s;

A ton clavier

**dhillig** · 19/01/2022, 13h37

Bonjour NoSmoking,
Je ne connais rien a Bootstrap

Il faut que tes éléments class="row" deviennent des éléments class="container row" afin que les marges appliquées aux éléments class="row" n’aient pas d’influence sur la largeur de la page ce qui occasionnent l’apparition de la scrollbar horizontale.

Je ne vois pas de class="row" dans les CSS.
Je dois faire erreur mais je ne les trouve pas

Mais je sens que je m'approche de la solution

MERCI BEAUCOUP,
DH

**ProgElecT** · 19/01/2022, 15h28

Salut

Envoyé par dhillig

...
Je ne vois pas de class="row" dans les CSS.
...

Justement comme te le dit/écrit NoSmoking , dans ta page au 3 emplacements, remplace <div class="row"> par <div class="container row">

**dhillig** · 19/01/2022, 15h30

Merci ProgElecT

Mais je ne trouve pas de class row

Merci pour ton aide,
DH

**ProgElecT** · 19/01/2022, 15h42

Tu as raison

pas trouvé non plus.
Essayes container row tout de même, tu verras bien, peut être qu'il nous échappe

.

**dhillig** · 19/01/2022, 16h19

Alors, j'ai changé

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body class="container-fluid p-0 m-0">

pour

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body class="container-row">

Je ne sais pas si j'ai bien fait mais je n'ai plus de décalage

(le scrollbar vertical devient noir lorsqu'on clique sur l'enveloppe (formulaire).
Par contre, j'ai toujours ce scrollbar horizontal qui fait que mon footer "bouge", et donc le btn_up aussi (mais uniquement en hauteur, merci NoSmoking

, en voici les CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#btn_to_top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	cursor: pointer;
	display: none;
	transition: font-size .3s, color .3s;
	z-index: 99;
	color: #00CC99;/*/ /* VERT */
 
}
#btn_to_top:hover {
	font-size:150%;
	color: #00CC99;/*/ /* VERT */
}
body.modal-open #btn_to_top {
  right: 37px;
 }

Merci BEAUCOUP, j'avance grâce à vous

DH

**NoSmoking** · 19/01/2022, 16h47

Envoyé par dhillig

Je ne vois pas de class="row" dans les CSS.

Ce n'est pas dans ton CSS mais dans celui de BootStrap et de ce qu'il ajoute, voir dans l'inspecteur.

Envoyé par dhillig

Je ne vois pas de class="row" dans les CSS.

Il y en a trois :

ligne 230 : <div class="row"> ;
ligne 1023 : <div class="row"> ;
ligne 1065 : <div class="row">.

dans la version disponible au moment où j'écris cette réponse.

Envoyé par dhillig

Alors, j'ai changé

ne fait pas n'importe quoi et suis les conseils avisés de ProgElecT :

Envoyé par ProgElecT

Essayes container row tout de même, tu verras bien, peut être qu'il nous échappe .

As-tu pris en compte mais autre remarques car je vois toujours des éléments <main> qui ne servent plus, si tu ne clarifies pas tout de suite pas étonnant qu'au bout d'un moment cela devienne le clair obscur !

Pas regardé plus loin.