Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap list group scroll

Tags:

<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, enter image description here

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?

like image 395
Ziqi Liu Avatar asked Nov 13 '17 02:11

Ziqi Liu


1 Answers

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>
like image 175
Calvin Ananda Avatar answered Sep 17 '22 08:09

Calvin Ananda