Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does a second vertical scroll bar appear in this Bootstrap 3.0 Modal demo?

Scroll down a bit on this Bootstrap 3.0 (WIP) page to the 'Launch Demo Modal'.

http://bs3.codersgrid.com/javascript/#modals

Notice a second vertical scroll bar appears. Why?

like image 358
Eric Avatar asked Jul 16 '13 01:07

Eric


3 Answers

/*remove double scrollbar*/
body.modal-open { overflow: hidden!important; }
like image 139
Walky Toki Avatar answered Nov 15 '22 21:11

Walky Toki


Because of the CSS style being applied to the element:

.modal {
    bottom: 0;
    display: none;
    left: 0;
    overflow-x: auto;
    overflow-y: scroll; /* <--- this guy right here */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
}

Explicitly setting an overflow property to scroll will cause the browser to display a scrollbar whether there is overflow or not.

like image 29
Brian Avatar answered Nov 15 '22 22:11

Brian


Completely remove the html tag from your style sheet. This will fix it.

like image 38
Mark Overton Avatar answered Nov 15 '22 23:11

Mark Overton