angular-ui-grid嵌套在angular-ui-layout中，高度爲100％

我試圖在angular-ui-layout的一個容器/窗格中顯示角度ui網格。容器應該在頂部包含一個工具欄，剩下的空間應該用圖表或我試圖用flexgrid和ng-include解決的相應數據表填充。我的問題是，我沒有得到ui網格首次顯示時正確初始化，並沒有填充剩餘的空間。另外，當我調整瀏覽器窗口大小時，它不能可靠地調整大小，有時它不會相應地增長，有時它通常不收縮，通常它是未對齊的滾動條。angular-ui-grid嵌套在angular-ui-layout中，高度爲100％

我嘗試使用handleWindowResize和ui-grid-auto-resize無濟於事。

ui的佈局是這樣的：

<div ui-layout="{flow : 'column'}" > 
    <div ui-layout-container size="20%"> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     </ul> 
    </div> 

    <div ui-layout-container> 

     <div style="height:100%;display:flex;flex-flow:column;padding:10px"> 

     <form role="form" style="padding-bottom:10px"> 
      <label>Toolbar</label> 
      <button ng-click="showAnalysis1=true">Analysis 1</button> 
      <button ng-click="showAnalysis1=false">Analysis 2</button> 
     </form> 

     <form role="form" style="padding-bottom:10px"> 
      <label>Sub-Toolbar</label> 
      <button ng-click="showChart=true">Show chart</button> 
      <button ng-click="setShowChart(false)">Show table</button> 
     </form> 

     <div class="analysis-container" ng-show="showAnalysis1" ng-include="'analysis1.html'"> 
     </div> 

     <div class="analysis-container" ng-show="!showAnalysis1" ng-include="'analysis2.html'"> 
     </div> 

     </div> 

    </div> 
</div>

和UI網格處於一起NG-包括具有虛設圖表，F.E.

<div ng-show="showChart"> 
    Here goes the chart for analysis 1... 
</div> 

<div ng-show="!showChart" class="my-grid-container"> 
    <div ui-grid="tableOptions" class="my-grid" ui-grid-auto-resize> 
    </div> 
</div>

下plnkr顯示這一背景下：

http://plnkr.co/edit/gIynXCdy7Kkyl0iwiBid?p=preview

重現：

則按分析1或分析2
按顯示錶
調整瀏覽器窗口幾次

現在請忽略ui-layout拆分器。目前，我只想調整瀏覽器窗口的大小，並讓UI網格填充剩餘的空間。

來源

2016-05-25 NicolasR

我看你已經正確地添加指令UI併網自動調整大小，但你也必須指定它作爲你的模塊一個模塊依賴：

angular.module('x', ['ui.layout', 'ui.grid','ui.grid.autoResize'])

http://plnkr.co/edit/8VmwsvBGnbtZNsjDL95C?p=preview

來源

2016-05-25 02:01:26 Brian

謝謝，似乎解決了初始化問題。但另一個問題是，網格不能正確填充剩餘的高度。如果您將網格高度固定爲f.e.只有200px，您會看到綠色容器正確調整大小，因爲它具有height = 100％，並且位於flex = 1容器中。但是，當我將網格高度設置爲100％時，網格會超出容器並顯示滾動條。我還嘗試將網格高度設置爲calc（100％-150px），即f.e.，它根本不起作用！網格然後回落到一個固定值，並且根本不縮放。任何想法？ – NicolasR

angular-ui-grid嵌套在angular-ui-layout中，高度爲100％

回答

相關問題