Navbar & Show Modal

Bonjour,

Lorsque le modal s’ouvre mon menu (Navbar) à un petit décalage du coté droit.

Pièce jointe 366153

Auriez vous une petit idée d’où pourrait venir le décalage ?

Merci.

Un p'tit peu d'code? La voyance devient très dur ces temps ci!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<button type="button" class="btn btn-secondary btn-sm tweet-btn" data-toggle="modal" data-target="#emojis"><img id="imgsub" src="assets/images/tweet/emojis.png"/></button> 
<div class="modal fade" id="emojis" tabindex="-1" role="dialog" aria-labelledby="emojis">
   <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
         <div class="modal-body" id="emojis">
            <a title=" :smiling: " href="#!"><img id="imgsub" src="assets/images/emojis/1.png" /></a>
            <a title=" :relieved: " href="#!"><img id="imgsub" src="assets/images/emojis/2.png" /></a>
            <a title=" :grinning: " href="#!"><img id="imgsub" src="assets/images/emojis/3.png" /></a>
            <a title=" :clin-doeil: " href="#!"><img id="imgsub" src="assets/images/emojis/4.png" /></a>
            <a title=" :tongue: " href="#!"><img id="imgsub" src="assets/images/emojis/5.png" /></a></td>
            <a title=" :rol-laughing: " href="#!"><img id="imgsub" src="assets/images/emojis/6.png" /></a>
            <a title=" :frowning: " href="#!"><img id="imgsub" src="assets/images/emojis/7.png" /></a>
            <a title=" :sleepy: " href="#!"><img id="imgsub" src="assets/images/emojis/8.png" /></a>
            <a title=" :expressionless: " href="#!"><img id="imgsub" src="assets/images/emojis/9.png" /></a>
            <a title=" :open-mouth: " href="#!"><img id="imgsub" src="assets/images/emojis/10.png" /></a>
            <a title=" :neutral: " href="#!"><img id="imgsub" src="assets/images/emojis/11.png" /></a>
            <a title=" :heart-eyes: " href="#!"><img id="imgsub" src="assets/images/emojis/12.png" /></a>
            <a title=" :satisfied: " href="#!"><img id="imgsub" src="assets/images/emojis/13.png" /></a>
            <a title=" :grimacing: " href="#!"><img id="imgsub" src="assets/images/emojis/14.png" /></a>
            <a title=" :sunglasses: " href="#!"><img id="imgsub" src="assets/images/emojis/15.png" /></a>
            <a title=" :dolar: " href="#!"><img id="imgsub" src="assets/images/emojis/16.png" /></a>
            <a title=" :nerd: " href="#!"><img id="imgsub" src="assets/images/emojis/17.png" /></a>
            <a title=" :star: " href="#!"><img id="imgsub" src="assets/images/emojis/18.png" /></a>
            <a title=" :zany: " href="#!"><img id="imgsub" src="assets/images/emojis/19.png" /></a>
            <a title=" :sweat: " href="#!"><img id="imgsub" src="assets/images/emojis/20.png" /></a>
            <a title=" :zipper-mouth: " href="#!"><img id="imgsub" src="assets/images/emojis/21.png" /></a>
            <a title=" :beaming: " href="#!"><img id="imgsub" src="assets/images/emojis/22.png" /></a>
            <a title=" :big-eyes: " href="#!"><img id="imgsub" src="assets/images/emojis/23.png" /></a>
            <a title=" :confused: " href="#!"><img id="imgsub" src="assets/images/emojis/24.png" /></a>
            <a title=" :drooling: " href="#!"><img id="imgsub" src="assets/images/emojis/25.png" /></a>
            <a title=" :joy: " href="#!"><img id="imgsub" src="assets/images/emojis/26.png" /></a>
            <a title=" :winking: " href="#!"><img id="imgsub" src="assets/images/emojis/27.png" /></a>
            <a title=" :hungry: " href="#!"><img id="imgsub" src="assets/images/emojis/28.png" /></a>
            <a title=" :tongue-out: " href="#!"><img id="imgsub" src="assets/images/emojis/29.png" /></a>
            <a title=" :megafrown: " href="#!"><img id="imgsub" src="assets/images/emojis/30.png" /></a>
            <a title=" :unamused: " href="#!"><img id="imgsub" src="assets/images/emojis/31.png" /></a>
            <a title=" :happy: " href="#!"><img id="imgsub" src="assets/images/emojis/32.png" /></a>
            <a title=" :heart: " href="#!"><img id="imgsub" src="assets/images/emojis/33.png" /></a>
            <a title=" :heart-broken: " href="#!"><img id="imgsub" src="assets/images/emojis/34.png" /></a>
         </div>
      </div>
   </div>
</div>

Bonjour,

Ici, tu es dans le forum CSS.

Donc, si tu ne montres pas le code CSS associé au code HTML,... :cristal:
Encore faut-il savoir quoi montrer... :koi:
Cela dit, je doute qu'on puisse en déduire quoi que ce soit...

Il serait préférable de montrer une page en ligne, qu'on puisse tester et inspecter.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
élément {
    display: block;
    padding-right: 17px;
}
 
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
 
.fade.show {
    opacity: 1;
}
 
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}
 
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

Citation:

Envoyé par jreaux62

Il serait préférable de montrer une page en ligne, qu'on puisse tester et inspecter.

Nous ne sommes pas magicien...