在 md-tab 中使用 ag-grid

Question

我使用了 ag-grid，并遵循了让页面的父 div 定义明确高度的规则，这样我就可以在网格上设置最大高度，允许滚动，而不是而不是无限期地长高。所以，我有这样的东西：

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

效果很好，百分比的表现与您预期的一样。

我现在想使用 angular material md-tabs 设置一些选项卡。当我将 ag-grid 放在选项卡内时，似乎我设置的高度值不够高。我假设它使用的是 md-tab 或 md-tabs 的高度，但是，我不确定 how/if 我可以显式设置选项卡的高度。我试过使用 '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>

Answer 1

您可以尝试在 <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>

在 md-tab 中使用 ag-grid

Using an ag-grid inside an md-tab

layout

tabs

angularjs

ag-grid