Secondary scrollable lists in bootstrap row are hidden

Question

I am using the Solution 1, the one true layout solution, from the stackoverflow question How can I make Bootstrap columns all the same height?

When more than 1 column in a bootstrap row is scrollable it seems to get overlapped by the other columns in that row. In the below example, only 1 of the 3 scrollable columns is visible while a similar column that is not scrollable also shows.

CodePen

html

<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="row sameHeightRow">
    <div class="col-xs-8 sameHeightCol" style="background-color: grey">
        test <br><br><br><br><br><br><br><br><br>
    </div>
    <div class="col-xs-1 sameHeightCol" style="background-color: yellow">
        <ul class="list-group">
            <li class="list-group-item">1</li>
            <li class="list-group-item">b</li>
            <li class="list-group-item">c</li>
            <li class="list-group-item">d</li>
        </ul>
    </div>
    <div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
        <ul class="list-group">
            <li class="list-group-item">2</li>
            <li class="list-group-item">b</li>
            <li class="list-group-item">c</li>
            <li class="list-group-item">d</li>
        </ul>
    </div>
    <div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
        <ul class="list-group">
            <li class="list-group-item">3</li>
            <li class="list-group-item">b</li>
            <li class="list-group-item">c</li>
            <li class="list-group-item">d</li>
        </ul>
    </div>
    <div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
        <ul class="list-group">
            <li class="list-group-item">4</li>
            <li class="list-group-item">b</li>
            <li class="list-group-item">c</li>
            <li class="list-group-item">d</li>
        </ul>
    </div>
</div>
</body>

css

.scrollable{
    max-height: 200px;
    overflow:auto; 
}
.sameHeightRow {
overflow: hidden; 
}
.sameHeightCol {
margin-bottom: -32767px;
padding-bottom: 32767px;
}

Frank Tan · Accepted Answer · 2016-03-14T13:01:08.477

I've forked your pen.

I guessed that the Bootstrap styles somehow weren't playing nicely with your .scrollable and .sameHeightCol styles, so what I did was move them to the <ul>s like so:

<div class="col-xs-1">
  <ul class="list-group scrollable sameHeightCol">
    <!-- <li> -->
  </ul>
</div>

This resolved the overlap issue, but then the 4 columns were too tall, so I wrapped them in another div and gave that div a height.

<div class="col-xs-4 columnContainer">
  <!-- Original col-xs-1 divs now become col-xs-3 -->
</div>

.columnContainer {
  height: 200px;
}

Hope this helps, and let me know if this wasn't what you were trying to achieve.

Secondary scrollable lists in bootstrap row are hidden

1 Answers1