I currently have an Angular application and my ng-repeat list is overflowing its container vertically. Here is a picture of the problem:
As you can see the list is overflowing its container at the bottom. I would like the list to be contained in its container and a vertical scroll bar to show up when there is overflow.
I have tried using overflow:scroll and overflow:auto css on the div containing the list but nothing seems to work. The scrollbars do show up around the list but it doesn't limit the list to the height of its container. Here is my code, the code that makes the list is towards the bottom:
<div style="height: 90%">
<h2>Foods and Meals</h2>
<span class="glyphicon bg-fade"></span>
<div class="jumbotron" id="foodJumbotron" style="height: 100%">
<div class="container" style="height: 100%">
<div class="row" style="height:100%">
<div class="col-xs-6" style="height:100%">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a data-target="#foodsTab" role="tab" data-toggle="tab">Foods</a></li>
<li><a data-target="#myFoodsTab" role="tab" data-toggle="tab">My
Foods</a></li>
<li><a data-target="#myMealsTab" role="tab" data-toggle="tab">My
Meals</a></li>
</ul>
<div class="tab-content" style="height:100%">
<!------------->
<!--FOODS TAB-->
<!------------->
<div id="foodsTab" class="tab-pane fade active in" style="max-height:95%" ng-controller="FoodsCtrl">
<form role="from" class="form-inline row list-group-item">
<div style="width:100%">
<span class="glyphicon glyphicon-search" style="margin-left: 0"></span>
<input type="text" class="form-control " style="width:60%; margin-left: 2%"
id="searchFoods"
ng-model="search"
placeholder="Search food database..."/>
<div class="btn-group">
<button type="submit" ladda="submitting" data-style="slide-right"
id="foodsTabSearch"
class="btn btn-primary btn-outline btn-sm btn-rounded">Search
</button>
<a class="btn btn-primary btn-outline btn-sm btn-rounded"
ng-click="filter.changeState()">Filter</a>
</div>
</div>
</form>
<div ng-show="filter.state" class="row" style="margin-top:4%;">
<div class="form-group ">
<input type="text" class="form-control" id="filterFoods"
ng-model="filter.value"
placeholder="Filter results..."/>
</div>
</div>
<div class="list-group-item row gt-header-colors">
<div class="col-xs-4" ng-click="sort.doSort('name')" style="text-align: left">
Name
<span ng-show="sort.state.name == 'name'"
class="glyphicon glyphicon-resize-small glyphicon-sort-by-alphabet"></span>
<span ng-show="sort.state.name == '-name'"
class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
</div>
<div class="col-xs-2" ng-click="sort.doSort('cal')">Cal
<span ng-show="sort.state.cal == 'cal'"
class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sort.state.cal == '-cal'"
class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</div>
<div class="col-xs-2" ng-click="sort.doSort('pro')">Pro
<span ng-show="sort.state.pro == 'pro'"
class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sort.state.pro == '-pro'"
class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</div>
<div class="col-xs-2" ng-click="sort.doSort('carb')">Carb
<span ng-show="sort.state.carb == 'carb'"
class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sort.state.carb == '-carb'"
class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</div>
<div class="col-xs-2" ng-click="sort.doSort('fat')">Fat
<span ng-show="sort.state.fat == 'fat'"
class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sort.state.fat == '-fat'"
class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</div>
</div>
<!-------------------------------------->
<!--HERE'S THE LIST THAT'S OVERFLOWING-->
<!-------------------------------------->
<div class="" id="foodsList" ng-style="{'max-height':'60%'}">
<div class="gt-list-group-item gt-draggable"
ng-repeat="food in filteredFoods = (FoodsService.foods | regexFilterNoCase:(filter.value == '' ?
'' : '\\b'+filter.value) | orderBy: sort.state.current) track by $index"
ng-style="{'background-color': food == FoodsService.selectedFood ? 'lightblue' : ''}"
ng-mousedown="FoodsService.selectedFood = food">
<div class="col-xs-4" style="text-align: left">{{food.name}}</div>
<div class="col-xs-2">{{food.cal}}</div>
<div class="col-xs-2">{{food.pro}}</div>
<div class="col-xs-2">{{food.carb}}</div>
<div class="col-xs-2">{{food.fat}}</div>
</div>
<div class="gt-list-group-item" ng-show="filteredFoods.length == 0"
ng-style="{'text-align':'center'}">
<div class="col-xs-12">No foods here!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT
Here are my custom css classes. They are actually in a less file but the only less attribute I use is extend. Everything else is basic css.
.gt-appfront-error:extend(.help-block all) {
color: #ffff00;
text-align: left;
font-size: large
}
.gt-list-item {
font-size: 150%;
}
.gt-header-colors {
background-color: #3ca2e0;
color: #FFF
}
/*Verticly align div*/
.gt-outer {
display: table;
//position: absolute;
height: 100%;
width: 100%;
}
.gt-middle {
display: table-cell;
vertical-align: middle;
}
.gt-inner {
margin-left: auto;
margin-right: auto;
}
.gt-list-group-item {
&:extend(.row all);
&:extend(.list-group-item all);
border-color: darkgray;
}
.gt-list-group-item:hover {
background-color: #d2e9f4;
}
.gt-draggable {
cursor: pointer;
}
.gt-droppable {
border-width: 5%;
border-style: dashed;
border-color: #ccc;
}
.gt-active-droppable {
border-color: #3ca2e0;
}
/* Tab Navigation */
.nav-tabs {
margin: 0;
padding: 0;
border: 0;
}
.nav-tabs > li > a {
background: #DADADA;
border-radius: 0;
cursor: pointer;
color: #555555;
margin-bottom: 0px;
box-shadow: inset 0 -8px 7px -9px rgba(0, 0, 0, .4);
}
.nav-tabs > li > a:hover {
background-color: lightblue !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
background: white !important;
border-radius: 5%;
border-width: 2px;
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, .4);
}
/* Tab Content */
.tab-pane {
background: white;
box-shadow: 0 0 4px rgba(0, 0, 0, .4);
border-radius: 0% 2% 2% 2%;
text-align: center;
padding: 5% 6% 1% 6%;
margin-top: 0px;
margin-left: 2px;
}
//.animate-show.ng-hide-add {
// animation: fadeOut 0.5s ease !important;
//}
.animate-show.ng-hide-remove {
animation: fadeIn 0.3s ease !important;
}
Any help would be greatly appreciated.
