我正在使用带有ui-grid和ui-view的AngularJS来尝试创建带有选项卡式容器的页面。每个选项卡的内容(通常是一个ui网格)正在ui-view中显示:
<div class="tabbed-container">
<uib-tabset>
<uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active">
<uib-tab-heading>
<i class="glyphicon glyphicon-{{t.icon}}"></i>
{{t.heading}}
</uib-tab-heading>
</uib-tab>
</uib-tabset>
<div ui-view></div>
</div>
内容可能如下所示:
<div class="panel">
<div ui-grid="gridOptions" ui-grid-infinite-scroll ui-grid-selection ui-grid-tree-view ui-grid-resize-columns class="grid"></div>
</div>
问题是ui网格没有垂直填充容器 - 它设置为最小高度。所有css类与&#34; panel&#34;相关仅限状态&#34;身高:100%&#34;,高度未在其他任何地方设置。尝试调试这种情况让我意识到,ui-view被网格正确填充,网格的大小计算不正确。选项卡式容器嵌套在其他ui视图中。有没有人知道什么可能导致这种行为或我可以尝试修复它?
答案 0 :(得分:0)
问题是由于没有将适当的样式传递给ui-view的内容引起的。解决方案是使用flex,在容器上设置“flex:1”并将其传递给ui-view。
.tabbed-container
{
flex: 1;
display: flex;
flex-flow: column;
/* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */
min-height: 100px;
min-width: 100px;
.tab-content
{
flex:1;
/* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */
min-height: 100px;
min-width: 100px;
}
}
HTML:
<div class="tabbed-container">
<uib-tabset>
<uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active">
<uib-tab-heading>
<i class="glyphicon glyphicon-{{t.icon}}"></i>
{{t.heading}}
</uib-tab-heading>
</uib-tab>
</uib-tabset>
<div class="tab-content" ui-view></div>