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

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>