Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stop Bootstrap 3.1.1 from shift content left when scroll bar appears?

I'm using Bootstrap 3.1.1 and when I have a page that requires a vertical scroll bar due to a lot of content, Bootstrap shifts the html body over -15px to made room for the vertical scroll bar. This was a big issue for Bootstrap modals but it was fixed in 3.0.1 I believe.

Any ideas, tricks, or hacks to avoid this problem?

like image 231
fat fantasma Avatar asked Mar 06 '14 00:03

fat fantasma


People also ask

How do I stop the scroll bar from moving in CSS?

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.

How do I keep my vertical scroll bar?

Click Start > Settings. Under Windows Settings, scroll down, and then click Ease of Access > Display. Scroll down, and then set Automatically hide scroll bars in Windows to Off.


1 Answers

Make the scroll-bar always visible, so there is no visual jump when going from long pages and back.

CSS:

html {
       overflow-y: scroll;
}
like image 62
Shawn Taylor Avatar answered Nov 01 '22 14:11

Shawn Taylor