CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lowcoupling
lowcoupling

Reputation: 2169

Bootstrap CSS: Fixed Left Side Bar

I am working on a web page based on Bootstrap css which I'd like to be similar to the Bootstrap Dashboard example. The problem I am experiencing is that the section at the right side of the left fixed sidebar scrolls horizontally while I'd like it to be fixed (although fluid). Here is the jsfiddle page reproducing the issue

http://jsfiddle.net/K7m5F/embedded/result/

here is the html

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li><a href="#" class="Active">ChoiceA</a>

                </li>
                <li><a href="#">ChoiceB</a>

                </li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height: 100%; width: 100%;">
            <div class="row">This is a test</div>

and here is the css

@import url("//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css");
 body {
    padding-top: 50px;
}
.sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.sidebar {
    display: none;
}
@media (min-width : 768px) {
    .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto;
        /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}
/* Sidebar navigation */
 .nav-sidebar {
    margin-right: -21px;
    /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.nav-sidebar>li>a {
    padding-right: 20px;
    padding-left: 20px;
}
.nav-sidebar>.active>a {
    color: #fff;
    background-color: #428bca;
}
/*
 * Main content
 */
 .main {
    padding: 20px;
}
@media (min-width : 768px) {
    .main {
        padding-right: 40px;
        padding-left: 40px;
    }
}
.main .page-header {
    margin-top: 0;
}
/*
 * Placeholder dashboard ideas
 */
 .placeholders {
    margin-bottom: 30px;
    text-align: center;
}
.placeholders h4 {
    margin-bottom: 0;
}
.placeholder {
    margin-bottom: 20px;
}
.placeholder img {
    display: inline-block;
    border-radius: 50%;
}
.controls {
    margin-top: 16px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

Upvotes: 3

Views: 4826

Answers (2)

AyB
AyB

Reputation: 11665

The reason it's scrolling horizontally is because even though you have specified the grid class (col-md-10), the inline style of width: 100% takes precedence over col-md-10 whose width is 83.3%.

Here's a demo where the scrolling doesn't occur:

DEMO

Upvotes: 1

Vaibhav Magon
Vaibhav Magon

Reputation: 1503

Remove the hard coded width from the div with class="main". It says 100% because of which the horizontal scroll bar appears on the page as it overrides the width set by col-md-9 of bootstrap. Hope this is what u were asking.

Upvotes: 1

Related Questions