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視圖中無法正確呈現

回答

相關問題