Bootstrap CSS: Fixed Left Side Bar

Vote count:

0

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://ift.tt/1u4428C

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);
}

asked 32 secs ago

lowcoupling

308