angular-ui-grid在嵌套的UI视图中无法正确呈现

我正在使用ui-grid和ui-view的AngularJS尝试使用选项卡式容器创建页面。每个选项卡（通常为UI-网格）的内容被一个UI视图内显示：angular-ui-grid在嵌套的UI视图中无法正确呈现

<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>

的问题是，用户界面网格确实不是垂直填充容器 - 它被设置为最小高度。所有与“面板”相关的CSS类只有“高度：100％”，高度不会在其他地方设置。尝试调试这种情况使我意识到，ui-view被一个大小错误计算的网格正确填充。标签容器嵌套在其他UI视图中。有没有人有线索可能会导致此类行为，或者我可以尝试修复它？

来源

2016-09-21 pSoLT

对于我的网格，我总是以像素为单位指定固定的高度。我不确定是否有替代方案可行，但如果有的话，希望有人会发布。 –

该问题是由于未将正确的样式传递给内容到UI视图而导致的。解决方案是使用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>

来源

2016-09-28 11:36:24 pSoLT

angular-ui-grid在嵌套的UI视图中无法正确呈现

回答

相关问题