Question

在materialize css框架的card-tabs元素中，我试图设置一个ag-grid表。

这是代码。

        <div class="card-tabs">
          <ul class="tabs tabs-fixed-width">
            <li class="tab"><a href="#test4">Test 4</a></li>
            <li class="tab"><a href="#test5">Test 5</a></li>
          </ul>
        </div>

        <div class="card-content  grey lighten-5">

          <div id="test4" style="height: 200px;">

            <div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>

          </div>

          <div id="test5">Test 5 content</div>
        </div>

       </div>

问题是我无法使用id='test4'自动调整元素的高度以使其可见。如果我从中删除style="height:200px;"，则不会显示网格。如果添加了它，则显示它，但由于网格的高度可能会变化，因此我不想将其静态地保持在200px上。

有什么方法可以使带有id='test4'的div根据ag-grid的大小自动调整大小？

我试图将height:auto;放入card-content和test4 div中，但没有成功。

Answer 1

如果其中没有内容，则不会显示。为什么不将空白的&nbsp值放在html中呢？

    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a href="#test4">Test 4</a></li>
        <li class="tab"><a href="#test5">Test 5</a></li>
      </ul>
    </div>

    <div class="card-content  grey lighten-5">

      <div id="test4"

        <div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
       &nbsp;
      </div>

      <div id="test5">Test 5 content</div>
    </div>

   </div>

自动调整带有ag-Grid的卡片内容的大小（具体化CSS）

1 个答案: