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.

Answer 1

In your css add :

body {
  overflow-y:hidden;
}

Answer 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>

Answer 3

Add style to body as:

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

Answer 4

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.

Answer 5

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"