Auto resize card-content (materialize css) with an ag-Grid in it

0
votes

In a card-tabs element from materialize css framework I'm trying to setup an ag-grid table.

Here is the code.

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

The problem is that I cannot auto resize the height of the element with id='test4' in order to gird be viewable. If I remove the style="height:200px;" from it, the grid doesn't show up. If I added it's being shown but I don't want to keep it statically on 200px since the grid's height could be varied.

Is there any way to make the div with the id='test4' automatically resize itself according to the size of the ag-grid?

I tried to put height:auto; both in card-content and test4 divs but without any success.

1
htmlcssangularjsmaterializeag-grid

1 Answers

0
votes

Div will not be shown if there is not content in it. Why don't you just put blank &nbsp value inside 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>