114

When I trigger a modal view in my page it triggers the scroll bar to disappear. It's an annoying effect because the background page starts moving when the modal moves in / disappears. Is there a cure for that effect?

1

14 Answers 14

139

This is a feature, class modal-open gets added to the HTML body when you show the modal, and removed when you hide it.

This makes the scrollbar disappear since the bootstrap css says

.modal-open {
    overflow: hidden;
}

You can override this by specifying

.modal-open {
    overflow: scroll;
}

in your own css.

7
  • can you please be more specific?
    – El Dude
    Jul 31, 2014 at 22:46
  • 1
    Added some more details. Better now?
    – flup
    Jul 31, 2014 at 22:52
  • 16
    It's more appropriate to use overflow-y:scroll, which I think better addresses the intent of the OPs question. Using overflow:scroll will add a horizontal scrollbar to the bottom of the screen.
    – Scott
    Mar 27, 2015 at 20:17
  • 1
    perfect, works with angular-strap modals as well, can simply include the above CSS in a <style></style> inside the templateUrl so it not inflict on other modals in the app. Mar 24, 2016 at 11:04
  • 3
    Use overflow: inherit; instead. This way the modal don't remove scroll when you have scroll and don't add scroll when you don't have Dec 27, 2018 at 17:10
38

I think that inherit is better than scroll because when you open modal, it will always open with scroll, but when you don't have any scrolls you will get the same problem. So I just do this:

.modal-open {
  overflow: inherit;
}
2
  • 1
    This is the real answer. overflow scroll still effect some element in my case.
    – Coisox
    Mar 5, 2018 at 23:04
  • Experienced same issue and however had to apply CSS to .modal class instead .modal-open
    – GUIR
    Feb 12, 2021 at 0:35
31

Its better to use overflow-y:scroll and remove padding from body, bootstrap modal added padding to page body.

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

IE browser Compatible: IE browser doing same thing by default.

3
  • 1
    Thx. Additionally, if modal popup needs to scroll and the parent needs to remain still .modal-body { max-height: calc(100vh - 210px); overflow-y: auto; } .modal-open { overflow: hidden; overflow-y: scroll; padding-right: 0 !important; } Apr 13, 2018 at 0:57
  • 1
    The padding-right: 0 !important; is indeed very important. In my case, even if the scrollbar is enabled it leaves behind an invisible scrollbar in the original page behind the modal and still moves the page to the left which is what I'm trying to remove. Thank you very much for this answer!
    – Yong
    Mar 29, 2021 at 2:21
  • 1
    Worked like a charm. Just as @YongPin said; when the modal popped up, an invisible scrollbar was still being shown behind it. the padding-right: 0 fixed it. Jun 5, 2021 at 15:22
26

I used

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

In this case you avoids to display the horizontal scroll bar

1
  • we could combine it with @Alisson Alvarenga 's answer and use overflow-y: inherit; Oct 26, 2017 at 7:36
10

Thank God I came accross this post! I was pulling my hair out trying to figure how to get my scrollbars back when closing the window using my own close link. I tried the suggestions for CSS but it just wasnt working properly. After reading

class modal-open gets added to the HTML body when you show the modal, and removed when you hide it. -- @flup

I came up with a solution using jquery, so incase anyone else has the same issue and the above suggestions dont work --

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>
3
  • I had an issue where I was overriding the hide.bs.modal event so I could execute some custom code when the modal was hidden, but what I didn't realize is that stopped the modal-open class from being removed from the body - hence my scroll bar didn't come back when closing this one specific modal. I'm not removing the modal-open class manually in my hide.bs.modal code and it fixes that issue.
    – Jim
    Feb 9, 2016 at 17:41
  • 1
    You should just need to add a data-dismiss="modal" attribute to your link instead of doing anything custom like this. Bootstrap will do all the appropriate closing actions when that link is clicked.
    – nollidge
    Apr 20, 2016 at 12:45
  • 1
    data-dismiss="modal" is not working in my case because I am calling a function in the angular controller. The jQuery solution suggested works very well for me.
    – gianni
    Feb 9, 2017 at 14:25
6

I was just playing with this 'feature' of Bootstrap modals. Seems the .modal class has overflow-y:auto; So the modal wrapper gets his own scrollbar when the modal itself becomes to high.

If you always want a scrollbar (designers often do) First set the body

body {
    overflow-y:scroll;
}

Then handle .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

Leave scrollbar disabling on body untouched in this case

All other answers on this page kept making my content jump.

Heads up!

Allthough this solution worked for me all the time, yesterday I had a problem using this fix when the modal is draggable and to large to fit the screen (vertically). It might have something to do with position:sticky elements I added?

1
  • When I've added body{overflow-y:scroll;}, my problem was solved. Thank you, sir.
    – FrenkyB
    Oct 14, 2017 at 11:13
4

The only answer that worked for me is the following:

.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}
1
  • This is also the only answer that worked for me. Thank you! Mar 5, 2021 at 0:02
2

Additionally, if modal popup needs to scroll with content inside and the parent needs to remain still, add the following to your Custom.css (overriding css)

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}
1
  • Genius, this is the only thing that has worked for me on BS5. Thank you
    – demo7up
    Mar 17 at 9:30
1

Better if you will create your own css file to customize a certain part of your bootsrap.

Do not Alter the css file of bootstrap because it will change everything in your bootstrap once you use it in other parts of your page.

If your page is somewhat long, it will automatically provide a scroll bar. And when the modal opened, it will hide the scroll bar because that's what bootstrap do as a default.

To avoid hiding it when modal is opened, just override it by putting the css code (below) on your own css file.

.modal-open {
    overflow: scroll;
}

just a vice versa...

.modal-open {
    overflow: hidden;
}
3
  • 3
    This seems to contain the same information as the other answer on this question. If your answer is different, edit it to clarify what exactly is different. Please only add a new answer if you have something new. Mar 4, 2015 at 2:22
  • 1
    It contains same answer but have other way of explaining it. Sometimes, understanding depends on how it is explained. Mar 4, 2015 at 2:30
  • 1
    Not all readers could get the same idea. Better to give other way of explaining it for them to understand clearly. Mar 4, 2015 at 2:32
0

the bootstrap modal adds a padding once it opens so you can try this code in your own css

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

This is probably caused that 1st modal (when closed) remove modal-open class from body element and second one wont add it back when trigger modal-open.

In this case I would use event to check if modal has been closed/hidden fully and open another

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

This will wait till 1st modal is closed to make sure modal-open is removed from body and re-added it when open.

0

I just had this problem myself, and finding this question quickly helped me understand what was causing the behaviour. So thanks.

However, I find these CSS workarounds a bit inelegant. Unless, that is, you specifically want to keep the scrollbars (although I can't think of a reason for that).

Essentially Bootstrap is applying padding-right to certain elements to compensate for removing the scrollbar.

Therefore, all you need to do is to put an extra wrapper with zero padding-right around your problematic element (and move the class that's being targeted up to it).

i.e. change from this...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... to this...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>
0

Just so PrimeNg users can get help here, PrimeNg does the same thing:

.p-overflow-hidden {
    overflow: hidden;
}

In the case of PrimeNg though, it can be disabled by disabling the modal property when opening the DynamicDialog; if that's appropriate for your use-case.

Otherwise, it requires the same fix as Bootstrap.

-1

In my case, bootstrap adds margin-left: -17px to my sidebar element by opening the modal. My solution on this, is to add m-0 class to sidebar.

Not the answer you're looking for? Browse other questions tagged or ask your own question.