Ngx-bootstrap: Opening the modal hides the scroll bar, hence shifts the content

[crazythoughts]

I'm using ng2-bootstrap's modal. But whenever the modal opens, it hides the scroll bar. Due to that the the content in the back shifts and when the modal closes the scroll bar reappears hence shifting the content back to the original place. Is there a way to make the modal not hide the scroll bar of the background content?

[valorkin]

it works 1to1 with http://v4-alpha.getbootstrap.com/components/modal/#live-demo
and it does the same, so I was treating this behavior as expected >.<

[crazythoughts]

Is there any way to customize it? I mean let the scroll bar show even if the modal opens? And fyi I am using the 3.3.7 version of bootstrap css.

[Rich0101]

I would prefer it if the scrollbars remained on the background page too so it doesn't look like the page is shifting when a modal appears.

[ctrl-brk]

You can add .modal-open {overflow-y: auto} to your css

[kennyho-code]

Has anyone found a solution to this problem?

[ctrl-brk]

.modal-open {overflow-y: auto} doesn't work for you?

[kennyho-code]

It does work. I must of overwritten it somewhere. Thanks! I appreciate your help.

[n4mr3g]

It partially works for me. By default, it hides the scrollbar and shifts the top navbar to the left. If I write this solution (.modal-open {overflow-y: auto;}) instead of shifting the navbar, it happens with the content below.

[jeffhow]

The modal() function adds a padding-right inline style. For me, it was adding it to the body and heading tags. This fixed it for me:

.modal-open{
  padding:0 !important;
  overflow-y: auto;
 }

More info: https://stackoverflow.com/questions/32862394/bootstrap-modals-keep-adding-padding-right-to-body-after-closed

[huesoamz]

the best solution to this is remove the class fade

[jayapalchandran]

Yeah, Had the same issue.
I tried jeffhow and it works. Yet, the content shifts up.
So, I tried this and it worked.

.modal-open{
  padding-right: 0 !important;
  overflow-y: auto;
 }

And removing fade also worked as stated in a comment of the stackoverflow answer.
But, we cannot have the animation(The effect of fading slowly)