Bootstrap: header moves when opening modal file

Question

I use the Bootstrap framework and have some problems with my header and modules. The title on my page is fixed, and when the modal file opens, it moves a few pixels to the right and goes back again when the modal closes.

An example is shown here: http://jsfiddle.net/D2RLR/7400/

I would like him to not move at all. I know this is caused by the scrollbar, so the container in the violin is set to 2000 pixels. Any ideas how I can solve this problem?

The code is as follows:

HTML

<div class="container"> <header> <nav id="menu" class="dl-menuwrapper"> <a href="#" class="menu-toggle dl-trigger"><i class="fa fa-reorder"></i></a> <ul class="dl-menu"> <li> <a href="#home" class="scroll"><i class="fa fa-home"></i>Home</a> </li> <li><a href="#profile" class="scroll"><i class="fa fa-user"></i>Profile</a></li> </ul> </nav> </header> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> 

CSS

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'); .container { margin-top: 10px; } button { margin-top:100px; } .modal-content { height:500px; } header { width: 150px; margin:auto; left:0; right:0; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; text-align: center; position: fixed; background-color:rgba(0, 0, 0, 0.90); z-index: 2; } 

Answer 1

try it

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

Answer 2

Updated Answer

This should do the trick:

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

JSFIDDLE HERE

Hope this helps !!!

If you're wondering why the modally open class uses the built-in padding-right: 15px style, so just rewrite the CSS and it seems to work fine.

Answer 3

Simple fix

 .modal-open { position: fixed; overflow: scroll; width: 100%; padding-right: 0!important; } 

Answer 4

This happens when a modal appears, the body receives an “overflow: hidden”. This causes the scroll bars to hide; the distance refers to the width of the scroll bar.

To verify this, use:

 body{ overflow: scroll !important; } 

The problem with this “fix” is that the scrollbars are slightly different from browser to browser, so you always see scrollbars or add some add-ons with jQuery right (about 18 pixels);

Answer 5

This is simply because your body loses the scroll bar, and the width of your body expands in the name of the width of the scroll bar. Or add overflow: scroll; to css properties of the body or use some js scroll bar custom plugin - there are scroll bars that do not share the width of the window with the body element.

Answer 6

When modal mode opens, all pages are moved. In addition, the .modal-open class is summarized in the body tag. So, I tried to add padding-right: 15px; in .modal-open . The body no longer moves except for the header . So I added padding-right: 15px to the .modal-open header , and now everything works fine.

CSS should be added:

 .modal-open { padding: right: 15px; } .modal-open header { padding: right: 15px; } 

Answer 7

no work but changing bootstrap itself from

 (this.$body.css("padding-right")||0,10) 

to

 (this.$body.css("padding-right")||0,0) 

Took me about an hour to find it and change

Answer 8

The combination of answers here is a solution that works for me:

 .modal-open[style] { padding-right: 0px !important; } body{ overflow: scroll !important; }