ng-repeat垂直溢出 [英] ng-repeat overflows vertically
本文介绍了ng-repeat垂直溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前有一个Angular应用程序，我的ng重复列表是垂直溢出其容器。这是问题的图片：
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.
我尝试使用 overflow ：scroll 和 overflow：auto css在包含列表的div，但没有什么似乎工作。滚动条会显示在列表周围，但不会将列表限制为其容器的高度。这是我的代码，使列表朝向底部的代码：
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
这里是我的自定义CSS类。他们实际上在一个较少的文件，但我所使用的唯一较少的属性是extend。一切都是基本的css。
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;
}
任何帮助将非常感激。
c $ c> id =foodsTab没有明确设置其
height 。它只有 max-height 设置。 ng-repeat 列表需要此 height 值来确定自身的高度。The problem was that the div containing the ng-repeat list, in this case the div with id="foodsTab", did not have its height explicitly set. It only had the max-height set. The ng-repeat list needed this height value to determine its own height.
这篇关于ng-repeat垂直溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
