1

I found this popular stackoverflow post (see also jsFiddle), which covers exactly my problem. But after applying this solution to my MWE, see on bootply, it still doesn't work. Why is it not working?

HTML:

<div class="container">
 <h1>Hello!</h1>

<div class="row">
    <div class="col-sm-3" style="background-color:yellow;">
        <div class="outer">
            <div class="inner">
                <p>hello</p>
                <br>
                ...
            </div>
        </div>
    </div>
    <div class="col-sm-9" style="background-color:pink;">
        <p>hello once</p>
    </div>
</div>

CSS:

.inner {
  height:200px;
  overflow-y: auto;
}

.outer{
  overflow:hidden; 
}
Community
  • 1
  • 1
d4rty
  • 3,970
  • 5
  • 34
  • 73

1 Answers1

0

To get the effect within a bootstrap column, you can set the right margins to a minus value and thereby hide the scrollbar. Also, add some more content so you've got something to scroll!

.inner {
  height:200px;
  overflow-y: auto;
margin-right:-15px;
}

.outer{
  overflow:hidden; 
  margin-right:-15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
   <div class="container">
 <h1>Hello!</h1>

<div class="row">
    <div class="col-sm-3" style="background-color:yellow;">
        <div class="outer">
            <div class="inner">
                <p>hello</p>
                <br>
                ...
    <p>hello</p>
                <br>
                ...
                <p>hello</p>
                <br>
                ...
 <br>
                ...
                <p>hello</p>
                <br>
                ...
            </div>
        </div>
    </div>
    <div class="col-sm-9" style="background-color:pink;">
        <p>hello once</p>
    </div>
</div>
Leo Farmer
  • 7,730
  • 5
  • 31
  • 47
  • Can I be sure, that the scrollbar has always a width of 15px? – d4rty Apr 21 '16 at 07:30
  • Have a look at this link: http://www.textfixer.com/tutorials/browser-scrollbar-width.php which seems to suggest that 17px is about standard. However, if you want to be exact, you could calculate the width via javascript. – Leo Farmer Apr 21 '16 at 21:44