27

when my modal popup window opens, it adds a vertical scrollbar to the right of the browser window. How do i disable this? I think this is enabled when the modal window has a very large height value where it needs to scroll. i want to disable this as my form height does not exceed the window height.

4
  • This has little to do with Bootstrap. Get familiar with Firebug or Chrome's dev tools and inspect the HTML structure. Modify as needed with CSS.
    – isherwood
    Jul 18, 2013 at 14:58
  • I suspect this is indicative of another issue -- perhaps bad markup. Be sure to validate. Jul 18, 2013 at 15:22
  • 4
    @isherwood - This does have to do with bootstrap. As indicated by alx in an answer below, bootstrap 3 does indeed contain the directive .modal { overflow-y: scroll; } No idea why it's not auto, but anyway... Jan 6, 2014 at 23:07
  • stackoverflow.com/a/47807685/7186739
    – Billu
    Apr 24, 2018 at 15:16

5 Answers 5

42

In your css add :

body {
  overflow-y:hidden;
}
1
  • 4
    It also adds a modal-open class to the body, which will add a 15px margin to the right, possibly to compensate for the scollbar, but shifting the content to the left if the scrollbar is not visible. Add this definition to remove that: body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 0; }
    – sp00n
    Dec 20, 2013 at 12:00
34

I have the same problem with bootstrap 3.0.0. It seems that .modal class has overflow-y: scroll rule which results in scrollbar always visible.

So, you can amend this either locally:

<div class="modal" ... style="overflow-y: auto;">
    ...
</div>

or globally:

<style>
.modal {
    overflow-y: auto;
}
</style>
3
  • 2
    Nice1! This works as expected and should be the choosen answer. Thank you. Dec 11, 2013 at 17:52
  • The question is: why does Bootstrap sets it that way? I wouldn't touch it unless I knew exactly what was going on. Asked at: github.com/twbs/bootstrap/issues/7972 Aug 13, 2014 at 20:57
  • I also had to remove the padding from body tag. So this combo worked for me. .modal {overflow-y: auto;} .modal-open {padding-right:0!important;}
    – JacobLett
    Jan 22, 2017 at 22:25
2

Add style to body as:

body { 
  padding-right: 0px !important;
  overflow-y: hidden !important;
}
0

If the model window height is not more than normal window height, it doesn't make any sense to display the the scroll bar. Check weather any <div></div> used to fade the background behind the model window has extra height than the viewpoint.

0

If your table is a child of a div such as <div class="table-responsive">, add the following style within the parent div tag so that the div tag now reads: <div class="table-responsive" style="overflow-y: hidden">.

NB: your div may be applying a different style other than .table-responsive, this would still work in such a case.

You can also override the style in your table or tbody tags, this will work well if there is no parent div tag whose style allows the table to scroll. If there is such a parent div tag you will still be able to lock the table from scrolling when you apply the following style, but the containing parent div will still have the scrollbar displayed albeit disabled. So, in the table tag it will be: <table style="overflow-y: hidden"> or in the case of the tbody tag: <tbody style="overflow-y: hidden">

The above works even when your div, table or tbody tags are applying other styles from external (e.g. bootstrap) or self-defined styles. so if you had a tag such as <table class="table table-sm table-striped"> you can still do: <table class="table table-sm table-striped" style="overflow-y: hidden">

In case you want to disable both horizontal and vertical scrolling, you just need to add the following within your style attribute so that it now reads: style="overflow-x: hidden; overflow-y: hidden"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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