Bootstrap: How to enable scroll bars?

Question

I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.

Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)

edit:

I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.

Post some code so we can take a look, we can't diagnose your problem blindly. — Andres I Perez, Apr 25 '12 at 18:12
I believe the issue is somewhere in your CSS file, some code or link to your project would be useful, have you tried to check your container in Firebug? — Nazariy, Apr 30 '12 at 01:18
http://stackoverflow.com/questions/9997192/twitter-bootstrap-fixed-layout-with-scrollable-sidebar — endo.anaconda, May 01 '12 at 23:36
Thanks for your help. Problem is solved. I can't close this? — loon3x, May 02 '12 at 22:47
Yes, you close it by posting an answer to your own question and then marking it as accepted. — jonschlinkert, May 07 '12 at 02:07

score 16 · Answer 1 · answered Mar 02 '13 at 17:48

16

Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.

answered Mar 02 '13 at 17:48

loopasam

3,027
2
21
22

score 3 · Accepted Answer · answered Feb 28 '13 at 16:55

3

I found removing the "position: fixed" for the navbar resolved this problem for me:

.navbar-fixed-top, .navbar-fixed-bottom {
    /*position: fixed;*/
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
}

This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue

answered Feb 28 '13 at 16:55

Michael Christie

46
2

1

As a note to everyone, in my case, I found out I had `overflow: hidden` on my body style. Took forever to find that. – Captain Hypertext Sep 16 '15 at 15:13

score 3 · Answer 3 · answered Dec 18 '14 at 10:23

3

Override it with your last stylesheet.
( Probably your own theme stylesheet. )

html, body {
    overflow: visible;
}

answered Dec 18 '14 at 10:23

B. van Bokkem

31
1

Was also forced to do this overflow:visible!important on the body class. Removing position:fixed didn't work for me. – J. Minjire Apr 15 '15 at 06:35

score 1 · Answer 4 · answered May 15 '12 at 16:36

<style type="text/css">
            body, html {
                height: 100%;
                overflow: hidden;
            }

            .navbar-inner {
                height: 40px;
            }

            .scrollable {
                height: 100%;
                overflow: auto;
            }

            .max-height {
                height: 100%;
            }

            .no-overflow {
                overflow: hidden;
            }

            .pad40-top {
                padding-top: 40px;
            }
    </style>

Hope this is what you are looking for

score 1 · Answer 5 · answered Mar 17 '13 at 07:40

1

You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.

answered Mar 17 '13 at 07:40

John Moore

178
2
6

Bootstrap: How to enable scroll bars?

5 Answers5

Linked