在md-tab中使用一個ag-grid

我已經使用了ag-grid，並且遵循了讓頁面的父div定義明確高度的規則，以便我可以在網格上設置最大高度，允許滾動，而不是無限期地增長。所以，我有這樣的事情：在md-tab中使用一個ag-grid

<div ng-controller="MyController as myCtrl" style="box-sizing: border-box; padding-top: 5px; width: 100%; height: 90%"> 

... 
    <div ag-grid="myGridOptions" class="ag-blue" style="width: 100%; height: 55%"></div>

這工作正常，並且百分比按照您的預期行事。

我現在想使用角度材質md-tabs設置一些標籤。當我把我的Ag網格放在選項卡中時，似乎我設置的高度值不夠高。我假設它使用md-tab或md-tabs的高度，但是，我不確定如何/如果我可以明確設置選項卡的高度。我嘗試過使用'style'屬性，但似乎沒有效果。

我想我需要強制選項卡或選項卡容器是一定的高度，但我不知道如何做到這一點。

<div ng-cloak> 
    <md-tabs md-border-bottom > 
     <md-tab label="Tab1" > 
      <div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>

來源

2017-04-19 Stealth Rabbi

你可以嘗試在<md-tabs>

文檔添加md-dynamic-height：https://material.angularjs.org/latest/api/directive/mdTabs

<div ng-cloak> 
<md-tabs md-border-bottom md-dynamic-height > 
    <md-tab label="Tab1" > 
     <div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>

來源

2017-04-19 20:49:52 Leguest

設置'MD-動態height'有效果，但網格不能有一個固定的高度％，而是增長到需要的高度，然後md-tabs也隨之增長。它不允許我在滾動時使網格具有固定的高度。 –

似乎工作的是，如果我在md-tabs上設置md-dynamic-height，然後將ag網格高度設置爲px中的固定高度，而不是％。我將這個標記爲正確的，因爲使用md-dynamic-height讓我找到了解決方案，但是好奇，如果你有其他建議 –

Yon可以試試flexboxes，或者'vh'而不是'px'。但更靈活的方法是編寫像'setHeight'指令，在那裏你會計算你的mdtab內容的高度 – Leguest

在md-tab中使用一個ag-grid

回答

相關問題