Bootstrap modal stops scrolling

Question

This is going to be a weird question...

I am having a problem on a site I am developing for a client. I have a couple of select2 inputs in a Bootstrap 3 modal window. On smaller screens the modal window scrolls fine vertically, until you focus on one of the two select inputs. After that, you can't scroll it by any means. Either with keyboard, or scroll wheel or by dragging the scrollbar.

I tried to make a fiddle that would reproduce the error, because I can't show you the site I'm working on, but on the fiddle, the scrolling works no matter what you do.

https://jsfiddle.net/maidomax/ckuoe762/4/

I tried fiddling with this also:

$('select').select2({
    dropdownParent: $("#myModal")
});

But it makes no difference. So... I have to ask the question another way.

What could possibly prevent the modal from scrolling? The scrollbar is visible, and it is not disabled, but it is stuck, and you can't move it any way you try. Is there a property on the div or some other part of the document that you could set to get this type of behavior?

Answer 1

Try to add this to your css:

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

I have had this problem before and this worked for me. If this does not fix your problem, can you make a gif of it?

Answer 2

I solved the issue by removing data-dismiss="modal" and adding

setTimeout(function(){ $('#myModal2').modal('show') }, 500);
$('#myModal1').modal('hide');

Hope it helps