Bootstrap : how to disable vertical scrollbar?

Question

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.

Solution 1

In your css add :

body {
  overflow-y:hidden;
}

Solution 2

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>

Solution 3

Add style to body as:

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

Comments

[isherwood]

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.

[Scott Simpson]

I suspect this is indicative of another issue -- perhaps bad markup. Be sure to validate.

[David Kirkland]

@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...

[Billu]

stackoverflow.com/a/47807685/7186739

[metamagikum]

Nice1! This works as expected and should be the choosen answer. Thank you.

[sp00n]

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; }

[Ciro Santilli OurBigBook.com]

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

[JacobLett]

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;}