teacup teacup - 4 years ago 86
CSS Question

Bootstrap3: Why is the element's position moving to right as the modal-overlay appear

Please take a look at my code here, and try to click the modal button menu.

As you can see, button menu and content are moving to right whenever the vertical-scroll hidden.

So, I tried this:

body.modal-open{
padding-right: 0;
overflow-y: scroll;
}


the code above can keep the vertical-scroll visible, so the button won't moving to right anymore.

But, another problem is the
div.content
, it's moving to left.

Then, I tried this:

body.content{
padding-right: 0px;
overflow-y:scroll;
overflow-x:hidden;
}


and nothing seems to work. I might be missing something here, need help:)

Answer Source

It seems that some script (bootstrap ?) adds a padding-right css property to the body.

Solution: add a css property to the body which avoids this

   body { padding-right:0 !important;} 

There's also the modal-open .modal selector which adds an overflow-y: scroll which may cause some displacement problem. If the above solution is not enough try to add

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

as well. But it should not be needed.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download