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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
user1929393
  • 4,089
  • 7
  • 30
  • 48
  • 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 '13 at 14:58
  • I suspect this is indicative of another issue -- perhaps bad markup. Be sure to validate. – Scott Simpson Jul 18 '13 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... – David Kirkland Jan 06 '14 at 23:07
  • https://stackoverflow.com/a/47807685/7186739 – Billu Apr 24 '18 at 15:16

5 Answers5

42

In your css add :

body {
  overflow-y:hidden;
}
Patsy Issa
  • 11,113
  • 4
  • 55
  • 74
  • 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 '13 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>
alx
  • 2,314
  • 2
  • 18
  • 22
2

Add style to body as:

body { 
  padding-right: 0px !important;
  overflow-y: hidden !important;
}
Sebastián Palma
  • 32,692
  • 6
  • 40
  • 59
Deepak Kv
  • 61
  • 9
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.

Hawckins
  • 1
  • 1
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"

Mathiokore
  • 21
  • 4