bootstrap list group scroll

Question

<div class="panel panel-primary" id="result_panel">
    <div class="panel-heading"><h3 class="panel-title">Result List</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            # many li here..
            <li class="list-group-item"><strong>The Barrington At Park
                Place</strong>(15210m)
            </li>
            <li class="list-group-item"><strong>Camden Huntingdon
                Apartments</strong>(15820m)
            </li>
            <li class="list-group-item"><strong>Enclave at Water's Edge
                Apartments</strong>(15830m)
            </li>
        </ul>
    </div>
</div>

my html looks like this. I expect many item in the list. And most time it will exceed my window,

I tried to set my css like this:

.list-group{
    margin-bottom: 10px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}

but it doesn't help, any ideas?

Answer 1

Only using BS, you can do it! The class overflow-auto does that + short HTML style attribute info.

I've tested over Bootstrap >= 4.6.x

Please take a look at the example below:

 <div class="list-group overflow-auto shadow" style="max-height: 100px;">
   <li id="item1">Item 1</li>
   <li id="item2">Item 2</li>
   <li id="item3">Item 3</li>
   <li id="item4">Item 4</li>
   <li id="item5">Item 5</li>
   <li id="item6">Item 6</li>
   <li id="item7">Item 7</li>
   <li id="item8">Item 8</li>
   <li id="item9">Item 9</li>
   <li id="item10">Item 10</li>
   <li id="item11">Item 11</li>
   <li id="item12">Item 12</li>
   <li id="item13">Item 13</li>
   <li id="item14">Item 14</li>
   <li id="item15">Item 15</li>
 </div>

Answer 2

Try adding max-height:

.list-group{
    max-height: 300px;
    margin-bottom: 10px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary" id="result_panel">
    <div class="panel-heading"><h3 class="panel-title">Result List</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
        </ul>
    </div>
</div>