Opening AngularJS modal causes page to shift if scrollbar exists

Question

I am creating an AngularJS modal that pops up when I hover over a menu element. The problem I have is when the current page has a scrollbar the modal causes the scrollbar for the main page to disappear, which then causes the background behind the modal to shift to the right, and when the modal closes the body shifts to the left.

When the modal opens it adds the class "modal-open" to the body. I can add the "modal-body" to my css file for the page, and define it as such:

    .modal-open{
    margin-right:15px;
}

Which fixes the problem, but only for pages with a scrollbar. If the page does not have a scrollbar and I use this custom "modal-open" css definition solution then the body shifts again.

Most of my pages have a scrollbar, so the custom "modal-open" css definition fixes most of my pages, but I would consider this a small bug.

Has anyone come across this error and if so how did you fix it?

Thanks,

David

Answer 1

As a patch over the bug, I simply put in a vertical scrollbar on the body. This forces one to appear, even if the page requires no scrolling. I would love a better solution though.

body{
overflow-y: scroll !important;

}

Answer 2

This is an existing bug with bootstrap-modal which is what I assume you're using. There's potential fixes given in this thread

e.g, adding this css, perhaps try putting it in a tag at the top of the page to see if it works before you modify your files

.modal-open, .modal-open .navbar-fixed-top {
    margin-right: auto !important;
}